So not too long ago the library React Router has updated to version 6 and with that it came with some interesting changes that I notice and see pe...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Thanks for the article! As for feedback and anyone else reading this, you missed a lot of the more important, key, breaking changes React Router v6 introduced which you might want to double check. I think you focused a little too much on some of the less important ones (like NavLink's className prop)
<Route>
component has now deprecated itschildren
&render
props, so it's no longer possible to pass router props likehistory / location / match
to components. You should now use theuseNavigate / useLocation / useParams
hooks.withRouter
Higher Order Component which made it possible to get router props anywhere has also been deprecated in favor of React Hooks<Routes>
component that replaces<Switch>
works entirely different now. It now will always focus on matching the most specific route instead of the first one it finds, making it more predictable.:
for dynamic routes (user/:id
) and the*
wildcard which can only be used at the end.For anyone else curious to learn more about these v6 changes (and the reason behind them), I would strongly discourage any kind of video material such as the one linked from Academind linked, and instead recommend the official React Router v6 announcement blog post which does an incredibly great job explaining all the changes in a well explained, yet concise manner. As well as the reasons that drove the team to make them.
very well noted
Thanks for the post you made about the difference between version 5 and 6. I hope you are always successful.
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?
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
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
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.
God bless you, ty
ugh...please don't surround string values with curly braces!
Bad: path={"/father"}
Good: path="/father"
I like the new Routes component instead of Switch, helps a lot to clarify the code :)
Yeah me too, a much better understanding of the code!
Yeah definitely helps with the readability, although I think switch made sense. Not a big fan of the activeClassName prop change though
Great article, thanks!
I'm glad you like it!!
Thank you
Thanks for this and the links! ππΎππΎ
I'm glad you find useful!!!
Thanks :-)