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)
The <Route> component has now deprecated its children & render props, so it's no longer possible to pass router props like history / location / match to components. You should now use the useNavigate / useLocation / useParams hooks.
The withRouter Higher Order Component which made it possible to get router props anywhere has also been deprecated in favor of React Hooks
The new <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.
Relative links work dramatically better and more predictably now.
Route patterns using Regexp are now deprecated, the only supported symbols are now : 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.
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.
Thanks for the post you made about the difference between version 5 and 6. I hope you are always successful.
very well noted