You should not use <Link> outside a <Router>
I'm assuming that you are using React-Router V4, as you used the same in the original Sandbox Link.
You are rendering the Main
component in the call to ReactDOM.render
that renders a Link
and Main component is outside of Router
, that's why it is throwing the error:
You should not use <Link> outside a <Router>
Changes:
Use any one of these Routers, BrowserRouter/HashRouter etc..., because you are using React-Router V4.
Router can have only one child, so wrap all the routes in a
div
or Switch.React-Router V4, doesn't have the concept of nested routes, if you wants to use nested routes then define those routes directly inside that component.
Check this working example with each of these changes.
Parent Component:
const App = () => (
<BrowserRouter>
<div className="sans-serif">
<Route path="/" component={Main} />
<Route path="/view/:postId" component={Single} />
</div>
</BrowserRouter>
);
render(<App />, document.getElementById('root'));
Main
component from route
import React from 'react';
import { Link } from 'react-router-dom';
export default () => (
<div>
<h1>
<Link to="/">Redux example</Link>
</h1>
</div>
)
Etc.
Also check this answer: Nested routes with react router v4
For JEST users
if you use Jest for testing and this error happen just wrap your component with <BrowserRouter>
describe('Test suits for MyComponentWithLink', () => {
it('should match with snapshot', () => {
const tree = renderer
.create(
<BrowserRouter>
<MyComponentWithLink/>
</BrowserRouter>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
});
Enclose Link component inside BrowserRouter component
export default () => (
<div>
<h1>
<BrowserRouter>
<Link to="/">Redux example</Link>
</BrowserRouter>
</h1>
</div>
)