Routes are not navigating when React v15.5 setup with react-redux v5 is

Question

I am new with React and I have setup my React project with Facebook's create-react-app. Here are the core files:

Index.js

import React from 'react';
import ReactDOM, { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

import { createStore, applyMiddleware } from "redux";
import { Provider } from 'react-redux'
import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

import App from './containers/App';
import Routes from "./Routes";

const browserHistory = createHistory();
middleware = routerMiddleware(browserHistory);
const store = createStore(reducers, applyMiddleware(middleware, thunk))
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>
      <App />
    </Router>
  </Provider>, document.getElementById('root')
);

Routes.js

import React, { Component } from 'react';
import { Route, Switch } from 'react-router';

import Home from './containers/Home';
import About from './containers/About';
import Contact from './containers/Contact';

class Routes extends Component {
  render() {
    return (
      <Switch>
        <Route exact path="/" component={ Home } />
            <Route path="/about" component={ About } />
            <Route path="/contact" component={ Contact } />
      </Switch>
    );
  }
}

export default Routes;

App.js

import React, { Component } from "react";
import { Link } from 'react-router-dom';
import Routes from "../Routes";
import SideNav from '../presentation/SideNav';

class App extends Component {
    render() {
        return (
            <div>
              <Link to='/'>Home</Link>
              <Link to='/about'>about</Link>
              <Link to='/contact'>contact</Link>
              <SideNav />
               <Routes />
            </div>
        );
    }
}

export default App;

The problem I am facing here is, When I am loading page with specific route, then, that component is rendering on browser. But if I am navigating to different route using "Link", say

<Link to='/contact'>contact</Link>

In that case, /contact component is not loading but the route is changing and reflecting in browser.

I looked for solutions, but mostly using depreciated code, Even in react-router-redux, example contains ConnectedRouter which is not in updated package.

I don't know if I have done some silly mistake in code or something is missing.

Thanks in advance. :)

Midpoint

Can you copy-paste console logs, as well? – Cossack

There are no errors in console, only warnings on imported files which are not used. – Midpoint

If I remove redux completely from index.js... then routing is working fine as expected... – Midpoint

Answer 1

The solution is here

import { withRouter } from 'react-router-dom'

// before
export default connect(mapStateToProps)(Something)

// after
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))

Generally, React Router and Redux work just fine together. Occasionally though, an app can have a component that doesn’t update when the location changes (child routes or active nav links don’t update).

This happens if:

• The component is connected to redux via connect()(Comp).
• The component is not a “route component”, meaning it is not rendered like so: <Route component={SomeConnectedThing}/>

The problem is that Redux implements shouldComponentUpdate and there’s no indication that anything has changed if it isn’t receiving props from the router. This is straightforward to fix. Find where you connect your component and wrap it in withRouter.

Midpoint