DEV Community

Discussion on: React router V6: Some of the new changes

View post
Collapse
 
not4ro profile image
Matteo Notaro •

I'm trying it but there's one thing that hurts me...
I'm from Angular and i've noticed that you have to declare in one single place ALL the possible routes of the app (for nested routing you have to declare them inside a Route like this


<Route path={"father"} element={Father}>
<Route path={"child"} element={Child}/>
</Route>

It is possible to have a more "clean" way to declare the sub-path in the father component?

Collapse
 
gabrlcj profile image
Gabriel Bittencourt • • Edited

So you can attach at the end of the path of your father component a "/*", so react router will know that this route will only show if it starts with that path name and not the exact path name like this

<Routes>
  <Route path="/welcome/*" component={<Father />} />
</Routes>
Enter fullscreen mode Exit fullscreen mode

And then have other paths starting with the same path name but with some additional name at the end, so inside the father component you have it's child component and there you can put the nested route for that specific path name to render the child component like this

<Routes>
  <Route path="new-user" component={<Child />} />
</Routes>
Enter fullscreen mode Exit fullscreen mode

So you don't have to put all the routes in to the same file, and if they're nested routes you can just add the "/*" at the end of that path name and create a route inside the child component, so it loads when it match's the URL.

Collapse
 
not4ro profile image
Matteo Notaro •

God bless you, ty

Collapse
 
urielbitton profile image
Uriel Bitton •

ugh...please don't surround string values with curly braces!
Bad: path={"/father"}
Good: path="/father"

Some comments have been hidden by the post's author - find out more