Menu
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.
533
In my own words, a nested route is a region within a page layout that responds to route changes. For example, in a single-page application, when navigating from one URL to another, you do not need to render the entire page, but only those regions within the page that are dependent on that URL change.
React Router version 6 makes it easy to nest routes. Nested routes enables you to have multiple components render on the same page with route parity. This is useful for app experiences where you want the user to be able to "drill down" into content and not lose their way, such as in forums or blogs.
Route: Route is the conditionally shown component that renders some UI when its path matches the current URL. Link: Link component is used to create links to different routes and implement navigation around the application. It works like HTML anchor tag.
Now, the last thing you need to do is tell React Router where in the parent Route ( Messages ) should it render the child Route ( Chats ). To do this, you use React Router's Outlet component. If the app's location matches the nested Route 's path , this Outlet component will render the Route 's element .
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
