What is new in React Router V6?

David A. Mazzo
Level Up Coding
Published in
2 min readDec 25, 2021

--

Photo by Ferenc Almasi on Unsplash

Do you know that the most popular library to manage your React application navigation has a new version? React Router is the most popular library to manage your React application navigation and the new version 6 brings with it very interesting novelties.

Version 6 brings the component Routes, which is basically the replacement of the old Switch component. The idea, according to the documentation, is to make it easier for an application to be seen as different independent parts, each of them living within a path.

It also brings the new Outlet component, that is used in the case in which we want to take the route declaration to a single place but we want to define a “layout” for each group of routes.

Another significant change is that even if you were able in previous versions of React Router to define routes as objects, this way of declaring routes is already 100% integrated into React Router V6 through the useRoutes hook.

Last but not least this new version of React Router is integrated with the React Suspense API, this means that the useNavigate hook replaces the useHistory hook for those moments in which we absolutely need to navigate through the application (for example, after sending a form).

As you can see, this new version of React Router brings quite captivating news. The new versions of this library usually break old features, that's why the way we structure and define the routes of our application will change significantly. In my concept, the most important change is the introduction of seeing route sets as mini-applications.

--

--