In React-Router v3, must all routes be nested within a <Route> with path=“/”?

问题:

I ask this because I want to know if this (below) is possible and if so how should my pages look to have this work correctly?

<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 to have the routes for "/" and "dashboard" be the same level child as each other?

For layout purposes, I want all the pages nested under "/" to use the Root component's layout while all the pages nested under "dashboard" to use the _Dashboard component's layout.

UPDATE (Solution Below)

The issue that was making what I have above not work/possible was due to where I had my Redirect for the root level located. Following Thomas Sojka's answer solved my issue.

Here (below) is what I currently have that is working just as I need it to (the component names and paths are slightly different this time around but the overall idea and structure should be enough 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 Redirect for the root level must be the same level child as the Routes for "/" and "dashboard", as well as after/below all these Routes, to work. Where I had this Redirect located in my original question made it so that "dashboard" and any of its children could never be found.

Having the Redirect for any of the children of "dashboard" located where it is works as well.

回答1:

You need to put your 404 route at the end otherwise the /dashboard route is never 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> 

回答2:

Yes it is possible, only thing is that you need to specify the child routes 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> 

回答3:

First of all, for React-Router v3 you have to provide routes property like this

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

If you don't, then you will get error

Warning: [react-router] Location "/" did not match any routes

If you just separate routes for "/" and "dashboard" without root Route tag, it will give you error

Adjacent JSX elements must be wrapped in an enclosing tag

The proper way to define your 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} /> 

文章来源: In React-Router v3, must all routes be nested within a with path=“/”?