0
287
ViewsNested routes react-router v6
I'm trying to make sense of some nested routes. I'm not sure if I set it up correctly
I have a component called Dashboard which will hold all content but if the path is not matched it will display a 404 page. When I try to hit /about it directs me to the 404 page all the time?
3 answers
Answer question0
This is probably what you are looking for:
https://codesandbox.io/s/react-router-v6-forked-v6xtk
• As Muhammed Jaseem suggested — all your routes should be put in one component.
• It is also better practice to create one js/jsx component per page.
0
The routes are supposed to be defined in the app.js file.
I assume you want to serve the 'About' component when '/home/about' is hit. To achieve this you must nest the Route definitions like:
<Route path="/home" element={<Dashboard />}>
<Route path='/about' element={<About />}/>
<Route path='/contact' element={<Contact />} />
</Route>
Of course the 'About' and 'Contact' components need to be in their own files and imported the same way you imported the 'Dashboard' component.
Finally, the 'to' attributes of the 'Link' components in your Dashboard.js need to be changed to the full path for example '/home/about'.
0
use
<Route path="/home/*" element={<Dashboard />} />
and
<Link to="contact" className="link">Contact</Link>