5

I'm currently trying to migrate react-router from v3 to v4, but I can't quite grasp the new concepts, my old react-router v3 code looks like this, can someone please take a look and give me some hints?

Thanks!

<Router history={ browserHistory }>
     <Route path="/" component={ App }>
       <IndexRoute name="index" component={ Index } />
       <Route name="documents" path="/documents" component={ Documents } onEnter={ authenticate } />
       <Route name="newDocument" path="/documents/new" component={ NewDocument } onEnter={ authenticate } />
       <Route name="editDocument" path="/documents/:_id/edit" component={ EditDocument } onEnter={ authenticate } />
       <Route name="viewDocument" path="/documents/:_id" component={ ViewDocument } onEnter={ authenticate } />
       <Route name="login" path="/login" component={ Login } />
       <Route name="recover-password" path="/recover-password" component={ RecoverPassword } />
       <Route name="reset-password" path="/reset-password/:token" component={ ResetPassword } />
       <Route name="signup" path="/signup" component={ Signup } />
       <Route path="*" component={ NotFound } />
     </Route>
   </Router>
razor7
  • 2,165
  • 2
  • 19
  • 32

1 Answers1

9

Don't nest routes.

Keep this part

<Router history={ browserHistory }>
  <Route path="/" component={ App } />
</Router>

and move all the nesting into <App /> (see here). Also react-router-v4 doesn't have the concept of <IndexRoute /> (see here).

Check out the documentation, it is incredible.

Community
  • 1
  • 1
Lyubomir
  • 19,615
  • 6
  • 55
  • 69