React Router 6 Features & Upgradation Guide
The most powerful client-router for React yet
--
React-router is probably the most used package with React. Recently, a new stable version 6 is released with many new features. And personally, I think that this is the best version of react-router so far.
Installation
$ npm i react-router-dom@latest
Switch Is Replaced With Routes
The first major change in v6 is that the Switch
component is now replaced with the Routes
component.
Ranked Routes
In previous versions of react-router, we have to define our routes in a certain order to get the right render. In v6, route order doesn’t matter.
Consider the snippet written in v5.
In the above snippet, /product/new
will be matched to the first route and Product
component will be rendered.
In v6, /products/new
will match both routes but will render NewProduct
component because it is a more specific match.
That’s the beauty of the new Routes
component by react-router v6.
Changes In Route Definition
The new version changed the way we define a route. Now, a Route
takes an element
prop instead of component
and the value to element
prop should be JSX not a reference to the component.