The new React Router — What’s instore?

1. Relative routes + links

  • All <Route>s and <Link>s inside <Routes> are relative.
  • Routes are chosen based on the best match instead of being checked in the order of appearance. That’s the reason you don’t need , and !

2. Nested routes

3. Automatic route ranking

4. Suspense-ready navigation

5. Object-based route config with useRoutes

Things to remember when migrating to React-router version 6:

  1. Replace Switch tags with Routes.
  2. Remove use of exact, strict in paths.
  3. Update Route path to follow the given patterns(: id and * at end of route pattern).
  4. Define relative and nested routes without the use of the current match.url.
  5. Replace react-router-config with useRoutes hooks to define route configurations in object format.
  6. Replace useHistory with useNavigate to perform navigation in code logic.
  7. Replace component/render property with element in Route path definitions.
  8. Use Suspense and React.lazy to load routes lazily by providing property element as the lazily loaded component.
  9. Use the useParams hook to get the parameter values from the current route.

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
WalkingTree Technologies

WalkingTree Technologies

WalkingTree is an IT software and service provider recognized for its passion for technology.