You should not use <Link> outside a

Question

I\'m trying to set up react-router in an example application, and I\'m getting the following error:

You should not use  outside a 
         


        

Answer 1

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 outside a

Changes:

1. Use any one of these Routers, BrowserRouter/HashRouter etc..., because you are using React-Router V4.

2. Router can have only one child, so wrap all the routes in a div or Switch.

3. 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 = () => (
  
    

      
      
    
  
);

render(, document.getElementById('root'));

Main component from route

import React from 'react';
import { Link } from 'react-router-dom';

export default () => (
  

    

      Redux example
    
  
)

Etc.

---

Also check this answer: Nested routes with react router v4