React Router 6 Features & Upgradation Guide
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.
$ 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
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.
/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.