React Router v4 not rendering components

Question

Having an issue with React Router v4 rendering components. On initial load of the application it will render the correct component corresponding to the URL However, any subsequent Link clicks will not render the desired component.

Libraries

• React Router: 4.2.2
• React: 15.6.1
• React DOM: 15.6.1
• -- just to mention libraries in case of impact --
  • React Redux: 5.0.6
  • Redux: 3.7.2
  • Material UI: 0.19.0

Going to omit some imports for sake of brevity

Site Structure

index.jsx
  |
  App.jsx
    |
    Auth.jsx
      |
      Layout.jsx
        <Routes />   

index.jsx

import React from 'react';
import store from './store.js';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';

import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();

import App from './containers/App.jsx';

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider muiTheme={muiTheme}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </MuiThemeProvider>
  </Provider>,
  document.getElementById('root')
);

App.jsx

import React, { Component } from 'react';
import Auth from '../components/Auth.jsx';

class App extends Component {
  render() {
    return <Auth />;
  }
}

Auth.jsx

import React from 'react';
import { Route } from 'react-router-dom';
import Layout from './Layout.jsx';

export default function Auth(props) {
  //this Has a render function to render a Loader, Error Page, or the Layout
  return <Layout />;
}

Layout.jsx

There's more complexity involved here with rendering out the entire application. I'm going to leave the other layout components commented out and just have some Links and a Switch component to get that working before making items more modular.

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

import Overview from './views/overview/Overview.jsx';
import Home from './views/home/Home.jsx';

export default class Layout extends Component {
  render() {
    return (
      <div className="layout">
        {/* <TopBar /> */}
        {/* <AppBar/> */}
        {/* <Drawer>
              <MainMenu/>
            </Drawer> */}

            <Link to="/">HOME</Link>
            <Link to="/overview">Overview</Link>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/overview" component={Overview} />
            </Switch>

        {/* <Routes /> */}
        {/* <Footer /> */}
      </div>
    );
  }
}

Routes.jsx

This is what I'm intending the routes components to look like.

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

import Home from './views/home/Home.jsx';
import Overview from './views/overview/Overview.jsx';
import Admin from './views/admin/Admin.jsx';
import NotFound from './NotFound.jsx';

export default function Routes(props) {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/overview" component={Overview} />
      <Route path="/admin" component={Admin} />
      <Route component={NotFound} />
    </Switch>
  );
}

Is there something I'm missing to get components to render clicking Link? I'm not getting any console errors or anything telling me there's an issue. So not sure if components are not wrapped correctly or what may be causing the issue.

Answer 1

Looks like what was happening is that with Redux integrations was blocking updates.

Need to:

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

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))'

Documentation