In React-Router v3, should all routes be nested in <route> using path = "/"?

Question

I ask about this because I want to know if this is possible (below), and if so, how should my pages look right?

 <Router history={browserHistory}> <Route path="/" component={Root}> <IndexRoute component={Home} /> <Route path="404" component={Empty} /> <Route path="about" component={About} /> <Route path="archive" component={Archive} /> <Redirect from="*" to="/404" /> </Route> <Route path="dashboard" component={_Dashboard}> <IndexRoute component={_Master} /> <Route path="post" component={_Post} /> <Redirect from="*" to="/dashboard" /> </Route> </Router> 

Is it possible that the routes for "/" and "dashboard" will be the same level children?

For layout purposes, I want all the pages nested within the "/" to use the layout of the root component, and all the pages nested under the toolbar to use the layout of the _Dashboard component.

UPDATE (solution below)

The problem that did what I had above did not work / was related to where I had my Redirect for the root level. After Thomas Jay, the answer solved my problem.

Here (below) there is what I have now, which works the way I need it (the names of the components and paths are slightly different this time, but the general idea and structure should be sufficient to show the solution).

 <Router history={browserHistory}> <Route path="/" component={Root}> <IndexRoute component={Home} /> <Route path="404" component={Empty} /> <Route path="about" component={About} /> <Route path="archive" component={Archive} /> </Route> <Route path="dashboard" component={_Root}> <IndexRoute component={_Home} /> <Route path="404" component={_Empty} /> <Route path="post" component={_Post} /> <Route path="post-single" component={_PostSingle} /> <Redirect from="*" to="404" /> </Route> <Redirect from="*" to="404" /> </Router> 

The redirection for the root level should be at the same level as the Routes for the "/" and "dashboard", as well as after / below all these routes. Where I had this redirection, which is in my original question, made sure that the "dashboard" and any of its children were never found.

The presence of redirection for any of the children of the "dashboard" located where it works.

Answer 1

You need to put your 404 route at the end, otherwise the route / dashboard will not be found:

  <Router history={browserHistory}> <Route path='/' component={Root}> <IndexRoute component={Home} /> <Route path='404' component={Empty} /> <Route path='about' component={About} /> <Route path='archive' component={Archive} /> </Route> <Route path='/dashboard' component={_Dashboard}> <IndexRoute component={_Master} /> <Route path='post' component={_Post} /> <Redirect from='*' to='/dashboard' /> </Route> <Redirect from='*' to='/404' /> </Router> 

Answer 2

Yes, maybe the only thing is that you need to specify child routes a little differently

 <Router history={browserHistory}> <Route path="/" component={Root}> <IndexRoute component={Home} /> <Route path="/404" component={Empty} /> <Route path="/about" component={About} /> <Route path="/archive" component={Archive} /> <Redirect from="*" to="/404" /> </Route> <Route path="/dashboard" component={_Dashboard}> <IndexRoute component={_Master} /> <Route path="/dashboard/post" component={_Post} /> <Redirect from="*" to="/dashboard" /> </Route> </Router> 

Answer 3

First of all, for React-Router v3 you need to provide a routes property similar to this

 const routes = ( // Your routes ); <Router history={browserHistory} routes={routes} /> 

If you do not, you will receive an error message

Warning: [response-router] Location "/" does not match routes

If you simply separate routes for "/" and "dashboard" without the root Route tag, this will result in an error

Adjacent JSX elements must be wrapped in a female tag

The correct way to determine routes

 const routes = ( <Route path="/"> <Route path="" component={Root}> <IndexRoute component={Home} /> <Route path="404" component={Empty} /> <Route path="about" component={About} /> <Route path="archive" component={Archive} /> <Redirect from="*" to="/404" /> </Route> <Route path="dashboard" component={_Dashboard}> <IndexRoute component={_Master} /> <Route path="post" component={_Post} /> <Redirect from="*" to="/dashboard" /> </Route> </Route> ); <Router history={browserHistory} routes={routes} />