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.