Links change URL but not rendered component

[cameronb23]

I have the bulk of my code located here if you would like to look: https://gist.github.com/cameronb23/3e8841efbd09b9cb135c5702817e5563

I have my routes and navigation set up to reflect that each should direct to a certain route. However, when I click those navigation elements, it changes the URL in my browser, but does not update anything being rendered in the DOM.

Expected Behavior

Switch to route specified and update rendered component and URL accordingly

Actual Behavior

Changes URL but not actual component that is supposed to be rendered on each route.

[timdorr]

This guide holds the answers you seek: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

[JarLowrey]

My issue was using multiple Routers, one for Link and one for Route. To fix this I wrapped the entire App in a Router, instead of individual parts.

WRONG:

App.js

render(){
  return (
	<div>
		<Header />
                <Router >
			<Switch>
				<Route exact path="/" component={Home} />
			</Switch>
                </Router>
	</div>
  );
}

Header.js

render(){
  return (<Router ><Link to="/asdf" /></Router>);
}

CORRECT:

App.js

render(){
  return (
    <Router >
	<Header />
	<Switch>
		<Route exact path="/" component={Home} />
	</Switch>
    </Router>
  );
}

Header.js

render(){
  return (<Link to="/asdf" />);
}

Edited for clarity.

[r3wt]

Just to add, for me it was because my AppLayout class was a PureComponent. switching to Component resolve matter.