React Router version 6 introduces several powerful new features, as well as improved compatibility with the latest versions of React. It also introduces a few breaking changes from version 5. This document is a comprehensive guide on how to upgrade your v4/5 app to v6 while hopefully being able to ship as often as possible as you go. In this blog, as a leading JavaScript development company in USA and India, you can go through the important points of this new version.
1. Remove <Redirect/>s inside <Switch/>
2. Upgrade all <Switch/> elements to <Routes/>
● All <Route>s and <Link>s inside a are relative. This leads to leaner and more predictable code in and <Link to>
● Routes are chosen based on the best match instead of being traversed in order. This avoids bugs due to unreachable routes because they were defined later in your <Switch>
● Routes may be nested in one place instead of being spread out in different components. In small to medium-sized apps, this lets you easily see all your routes at once. In large apps, you can still nest routes in bundles that you load dynamically via React.lazy
<Routes> and are the primary ways to render something in React Router based on the current location. You can think about a <Route> kind of like an if statement; if its path matches the current URL, it renders its element! The <Route caseSensitive> prop determines if the matching should be done in a case-sensitive manner (defaults to false).
Whenever the location changes, <Routes> looks through all its children elements to find the best match and renders that branch of the UI. <Route> elements may be nested to indicate nested UI, which also correspond to nested URL paths. Parent routes render their child routes by rendering an <Outlet>.
3. Use usenavigate instead of useHistory
React Router v6 introduces a new navigation API that is synonymous with <Link> and provides better compatibility with suspense-enabled apps.
The useNavigate hook returns a function that lets you navigate programmatically, for example after a form is submitted. If using replace: true, the navigation will replace the current entry in the history stack instead of adding a new one.
The navigate function has two signatures:
● Either pass a To value (same type as <Link to>) with an optional second { replace, state } arg or
● Pass the delta you want to go in the history stack. For example, navigate(-1) is equivalent to hitting the back button
4. Rename <NavLink exact> to <NavLink end>
This is a simple renaming of a prop to better align with the common practices of other libraries in the React ecosystem.
5. Remove activeClassName and activeStyle props from <NavLink />
A <NavLink> is a special kind of that knows whether or not it is “active”. This is useful when building a navigation menu such as a breadcrumb or a set of tabs where you’d like to show which of them is currently selected. It also provides useful context for assistive technology like screen readers.
As of v6.0.0-beta.3, the activeClassName and activeStyle props have been removed from NavLinkProps. Instead, you can pass a function to either style or className that will allow you to customize the inline styling or the class string based on the component’s active state.
6. Get StaticRouter from react-router-dom/server
The StaticRouter component has moved into a new bundle: react-router-dom/server.
This change was made both to follow more closely the convention established by the react-dom package and to help users understand better what a is for and when it should be used (on the server).
