@lucascavalcante Just make sure you’re rendering your <Link>s somewhere in the tree underneath your <Router> (i.e. in one of your <Route component> components). This won’t work:

<div>
  {/* This link needs to be a descendant of the <Router>. To fix, move the <Router> to the root! */}
  <Link></Link>
  <Router>
    ...
  </Router>
</div>

Anyone have a solution to this in terms of testing? Rendering your components within the context of your application Router is no issue when running the application, but is more difficult to do when you are writing tests for components. We shouldn’t have to render out the whole app to run a unit test on a component that contains a Link, no?

It works for me by the following lines of code

import {MemoryRouter} from `'react-router-dom'
<MemoryRouter>
 <MyComponent />
</MemoryRouter>

<Router>

https://github.com/gildata/RAIO/issues/41

<Router> must be the top parent of all <Link>s.

@mjackson

You did a Good Job!

Please verify that you have version 4.0.0 of react-router and react-router-dom installed in your node_modules.

Basically,

BrowserRouter must be the top parent of all Links. In new versions seems you need a layout where to put your menu with your links Example

<BrowserRouter>
	<Layout>
		<Switch>
			<Route exact path="/" component={Homepage} />
			<Route path="/resources" component={Resources} />
			<Route component={Error404} />
		</Switch>
	</Layout>
</BrowserRouter>`

LAYOUT

const Layout = props => ({
	render() {
		return (
			<div className="o-container">
				<Header />
				<main>{props.children}</main>
				<Footer />
			</div>
		);
	}
});
export default Layout;`

HEADER

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Header extends Component {
	authButton() {
		return <button> Sign In </button>;
	}

	render() {
		return (
			<nav className="navbar navbar-light">
				<ul className="nav navbar-nav">
					<li className="nav-item">
						<Link to="/">Home</Link>
					</li>
					<li className="nav-item">
						<Link to="/resources">Resources</Link>
					</li>
					<li className="nav-item"> {this.authButton()} </li>
				</ul>
			</nav>
		);
	}
}
export default Header;

@lucascavalcante What doesn’t work? Going back to beta versions isn’t really a solution now that final is released.

Well I would recommend updating react-router-dom to 4.0.0 now that it is out of beta.

I’ve seen other people have context issues, but that was typically with earlier versions of react-router where the context was different.

If updating the dom package doesn’t fix the issue, I would reset everything with a rm node_modules && npm install. Sometimes that folder seems to have a chaotic mind of its own.