Migrating from React Router v5 to v6: A Comprehensive Guide

Simplifying Route Declarations

Removal of exact Prop

The exact prop is no longer needed in v6, as routes now match exactly by default. This change reduces boilerplate and makes route configuration more intuitive.

Changes to Route Rendering

The render and component props are removed in favor of a new element prop. This prop takes a JSX element, streamlining the way components are rendered within routes:

// v5
<Route exact path="/example" render={(props) => <ExampleComponent {...props} />} />

// v6
<Route path="/example" element={<ExampleComponent />} />

Enhancing Nested Routes and Relative Routing

Structuring Nested Routes

V6 introduces a more logical approach to nested routing. Routes are defined as children of a parent <Route>, using relative paths which make the structure clearer and more maintainable:

// v6 Nested Routes Example
<Route path="/dashboard/*" element={<DashboardLayout />}>
  <Route path="stats" element={<Stats />} />
  <Route path="reports" element={<Reports />} />
  <Route index element={<Navigate to="stats" replace />} />
</Route>

Using <Outlet> for Nested Components

The <Outlet /> component is used within the parent component to render the nested routes, replacing the need for nested <Switch> elements.

Updates to Redirects and Navigation

Transition from <Redirect> to <Navigate>

The <Navigate> component replaces <Redirect> for more intuitive and flexible navigation handling:

// v5
<Route path="/" render={() => <Redirect to="/home" />} />

// v6
<Route path="/" element={<Navigate to="/home" replace />} />

Replacing useHistory With useNavigate

The useNavigate hook provides a more powerful and flexible API for programmatically navigating between routes:

// v5
const history = useHistory();
history.push('/home');

// v6
const navigate = useNavigate();
navigate('/home');

Improved Route Matching and Dynamic Patterns

V6 uses a sophisticated matching algorithm to ensure the most appropriate route is selected. It also supports dynamic segments and custom patterns within route parameters, enhancing flexibility for route definitions.

Introducing Index Routes

The new <Route index> simplifies the definition of default routes within a group, providing a cleaner and more declarative approach to routing:

<Route path="/dashboard/*" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
</Route>

Streamlined API and Enhanced TypeScript Support

React Router v6 offers a cleaner API and improved TypeScript integration, making it easier to manage route configurations and ensuring type safety.

Looking Ahead: Data APIs in v6.4+

Starting from v6.4, React Router introduces data APIs such as loaders and actions for handling data fetching and form submissions directly within route configurations. This feature represents the future direction of React Router, aiming to integrate data handling seamlessly with routing.

Changes to Link and NavLink Components

URL and State Separation

In v6, the method of passing URLs and state objects has been streamlined. Instead of passing an object to the to prop, you now pass the URL as a string and provide the state separately:

// v6 Example
<Link to={`${tenantStateManager.get('basename')}/sdwan/link-details/${encodeURIComponent(params.data.linkName)}`} state={{ linkName: params.data.linkName, ...dataForDetails }}>
  {value}
</Link>

Active Link Styling

The activeClassName prop has been removed in favor of a more flexible approach using a function to determine the class based on the active state:

// v6 Example
<NavLink to={`${item.path}`} className={({ isActive }) => `${styles.insightsNavItem} ${isActive ? styles.active : ''}`.trim()}>
  <span>{item.name}</span>
  {item.desc ? (
    <InfoIcon
      content={item.desc}
      popoverPlacement="bottom"
      addClassname={styles.infoIcon}
      containerId={popUpContainer}
    />
  ) : null}
</NavLink>

Migration Checklist

To successfully migrate from React Router v5 to v6, consider the following key changes:

• Replace <Switch> with <Routes>.
• Eliminate the exact prop.
• Transition from render/component to element.
• Update redirects using <Navigate>.
• Adapt nested routes to use relative paths and <Outlet>.
• Utilize new hooks and improved route matching.
• Update Link and NavLink components to accommodate URL and state separation, and the new method for styling active links.

Conclusion

By following this guide, developers can upgrade to React Router v6 efficiently, taking advantage of its improved features and capabilities. Remember, while the transition requires some adjustments, the benefits of a more robust and developer-friendly routing solution are well worth the effort.