You should not use Link outside a Router

Question

I m trying to set up react-router in an example application  and I m getting the following error   You should not use  lt Link gt  outside a  lt Router gt    My app is set up like so   Parent component    const router        lt div className  sans-serif  gt       lt Router histpry  browserHistory  gt         lt Route path     component  Main  gt           lt IndexRoute component  PhotoGrid  gt  lt  IndexRoute gt           lt Route path   view  postId  component  Single  gt  lt  Route gt         lt  Route gt       lt  Router gt     lt  div gt      render  lt Main   gt   document getElementById  root       Child Main component  export default      gt       lt div gt       lt h1 gt         lt Link to     gt Redux example lt  Link gt       lt  h1 gt     lt  div gt      Any idea what I m doing wrong here   Here s a Sandbox link to demonstrate the problem

User · Answer

Write router in place of Main in render  last line in the code   Like this ReactDOM render router  document getElementById  root

User · Answer

I was getting this error because I was importing a reusable component from an npm library and the versions of react-router-dom did not match   So make sure you use the same version in both places

User · Answer

For JEST users  if you use Jest for testing and this error happen just wrap your component with  lt BrowserRouter gt   describe  Test suits for MyComponentWithLink        gt    it  should match with snapshot        gt    const tree   renderer    create       lt BrowserRouter gt         lt MyComponentWithLink  gt       lt  BrowserRouter gt         toJSON     expect tree  toMatchSnapshot

User · Answer

I kinda come up with this code     import React from  react   import   render   from  react-dom       import componentns import Main from    components Main   import PhotoGrid from    components PhotoGrid   import Single from    components Single       import react router import   Router  Route  IndexRoute  BrowserRouter  browserHistory  from  react-router-dom   class MainComponent extends React Component     render         return          lt div gt           lt BrowserRouter history  browserHistory  gt             lt Route path     component  Main   gt               lt IndexRoute component  PhotoGrid  gt  lt  IndexRoute gt               lt Route path   view  postId  component  Single  gt  lt  Route gt             lt  Route gt           lt  BrowserRouter gt         lt  div gt                render  lt MainComponent   gt   document getElementById  root       I think the error was because you were rendering the Main component  and the Main component didn t know anything about Router  so you have to render its father component

User · Answer

Make it simple   render  lt BrowserRouter gt  lt Main   gt  lt  BrowserRouter gt   document getElementById  root       and don t forget  import   BrowserRouter   from  react-router-dom

User · Answer

If you don t want to change much  use below code inside onClick  method   this props history push

User · Answer

Whenever you try to show a Link on a page thats outside the BrowserRouter you will get that error   This error message is essentially saying that any component that is not a child of our  lt Router gt  cannot contain any React Router related components   You need to migrate your component hierarchy to how you see it in the first answer above  For anyone else reviewing this post who may need to look at more examples   Let s say you have a Header jscomponent that looks like this   import React from  react   import   Link   from  react-router-dom    const Header        gt        return            lt div className  ui secondary pointing menu  gt               lt Link to     className  item  gt                  Streamy              lt  Link gt               lt div className  right menu  gt                   lt Link to     className  item  gt                      All Streams                  lt  Link gt               lt  div gt           lt  div gt             export default Header    And your App js file looks like this   import React from  react   import   BrowserRouter  Route  Link   from  react-router-dom   import StreamCreate from    streams StreamCreate   import StreamEdit from    streams StreamEdit   import StreamDelete from    streams StreamDelete   import StreamList from    streams StreamList   import StreamShow from    streams StreamShow   import Header from    Header    const App        gt      return        lt div className  ui container  gt         lt Header   gt         lt BrowserRouter gt           lt div gt           lt Route path     exact component  StreamList    gt           lt Route path   streams new  exact component  StreamCreate    gt           lt Route path   streams edit  exact component  StreamEdit    gt           lt Route path   streams delete  exact component  StreamDelete    gt           lt Route path   streams show  exact component  StreamShow    gt           lt  div gt          lt  BrowserRouter gt       lt  div gt           export default App    Notice that the Header js component is making use of the Link tag from react-router-dom but the componet was placed outside the  lt BrowserRouter gt   this will lead to the same error as the one experience by the OP  In this case  you can make the correction in one move   import React from  react   import   BrowserRouter  Route   from  react-router-dom   import StreamCreate from    streams StreamCreate   import StreamEdit from    streams StreamEdit   import StreamDelete from    streams StreamDelete   import StreamList from    streams StreamList   import StreamShow from    streams StreamShow   import Header from    Header    const App        gt      return        lt div className  ui container  gt         lt BrowserRouter gt           lt div gt           lt Header   gt           lt Route path     exact component  StreamList    gt           lt Route path   streams new  exact component  StreamCreate    gt           lt Route path   streams edit  exact component  StreamEdit    gt           lt Route path   streams delete  exact component  StreamDelete    gt           lt Route path   streams show  exact component  StreamShow    gt           lt  div gt          lt  BrowserRouter gt       lt  div gt           export default App    Please review carefully and ensure you have the  lt Header   gt  or whatever your component may be inside of not only the  lt BrowserRouter gt  but also inside of the  lt div gt   otherwise you will also get the error that a Router may only have one child which is referring to the  lt div gt  which is the child of  lt BrowserRouter gt   Everything else such as Route and components must go within it in the hierarchy   So now the  lt Header   gt  is a child of the  lt BrowserRouter gt  within the  lt div gt  tags and it can successfully make use of the Link element

User · Answer

Enclose Link component inside BrowserRouter component   export default      gt       lt div gt      lt h1 gt         lt BrowserRouter gt           lt Link to     gt Redux example lt  Link gt         lt  BrowserRouter gt       lt  h1 gt     lt  div gt

User · Answer

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  lt Link  outside a  lt 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        gt       lt BrowserRouter gt       lt div className  sans-serif  gt         lt Route path     component  Main    gt         lt Route path   view  postId  component  Single    gt       lt  div gt     lt  BrowserRouter gt      render  lt App   gt   document getElementById  root       Main component from route  import React from  react   import   Link   from  react-router-dom    export default      gt       lt div gt       lt h1 gt         lt Link to     gt Redux example lt  Link gt       lt  h1 gt     lt  div gt      Etc     Also check this answer  Nested routes with react router v4

User · Answer

You can put the Link component inside the Router componet  Something like this     lt Router gt           lt Route path   complete-profiles  component  Profiles    gt           lt Link to   complete-profiles  gt             lt div gt Completed Profiles lt  div gt           lt  Link gt         lt  Router gt

[reactjs] You should not use <Link> outside a <Router>

Examples related to reactjs

Examples related to react-router

Examples related to jsx