React Router v5 vs v6: Complete Guide (2023)

React Router DOM v5 is still functional in 2023, but upgrading to v6+ is recommended for better performance, simplified API, and long-term support. The key difference is that v6+ no longer supports custom route components like v5 does, instead requiring strict adherence to the new Routes and Route component structure. For new projects or existing applications with significant custom route logic, v6+ offers more modern routing approaches, while v5 remains viable for maintenance-only projects through the compatibility package.

Contents

• Can I Still Use React Router v5 in 2023?
• Key Differences Between v5 and v6+
• Custom Route Components: v5 vs v6+
• Migration Strategies
• Which Version Should You Choose?

Can I Still Use React Router v5 in 2023?

Yes, you can still use React Router DOM v5 in 2023, but it’s no longer the actively maintained version. The official React Router documentation acknowledges that v5 is still supported through a backwards compatibility package called react-router-dom-v5-compat. This package allows you to run both v5 and v6 in parallel during the migration process.

The primary considerations for continuing with v5 include:

• Maintenance-only applications: If your project doesn’t require new features and just needs bug fixes
• Complex custom route logic: If your heavily relies on v5’s more flexible custom route component approach
• Gradual migration strategy: Using the compatibility package to upgrade incrementally

However, v5 is no longer receiving active development, meaning you won’t get new features, security updates, or performance improvements that come with v6+.

Key Differences Between v5 and v6+

Component Structure Changes

The most significant change is the replacement of Switch with Routes:

v5 syntax:

import { BrowserRouter, Switch, Route } from 'react-router-dom';

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/users" component={Users} />
  </Switch>
</BrowserRouter>

v6 syntax:

import { BrowserRouter, Routes, Route } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<HomePage />} />
    <Route path="/users" element={<Users />} />
  </Routes>
</BrowserRouter>

API Changes

Several components and APIs were either removed or significantly changed:

• Switch → Routes
• component prop → element prop
• useRouteMatch → useMatch
• Prompt and usePrompt were removed
• history object access was simplified

According to the official React Router upgrade guide, these changes were made to follow React conventions more closely and improve API consistency.

Custom Route Components: v5 vs v6+

v5 Custom Route Components

React Router v5 supported custom route components that could wrap and modify route behavior. This was particularly useful for:

• Authentication guards
• Layout wrappers
• Route-specific data loading
• Analytics tracking

Example v5 custom route component:

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const { isAuthenticated } = useAuth();
  
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

// Usage
<ProtectedRoute exact path="/dashboard" component={Dashboard} />

v6+ Restrictions on Custom Route Components

In v6+, custom route components are no longer valid. As stated in the Stack Overflow discussion, “in react-router-dom@6 custom route components are no longer valid. Only Route components can be rendered by the Routes component.”

This means you need to refactor your custom route logic using different approaches:

v6+ approach using hooks:

const ProtectedRoute = ({ element: Element, ...rest }) => {
  const { isAuthenticated } = useAuth();
  
  return (
    <Route
      {...rest}
      element={isAuthenticated ? <Element /> : <Navigate to="/login" />}
    />
  );
};

// Usage
<ProtectedRoute path="/dashboard" element={<Dashboard />} />

Alternative v6+ approach using route configuration:

const routes = [
  {
    path: "/dashboard",
    element: isAuthenticated ? <Dashboard /> : <Navigate to="/login" />,
  }
];

<Routes>
  {routes.map((route, index) => (
    <Route key={index} {...route} />
  ))}
</Routes>

The React Router v6 documentation explains that this change was made to eliminate the distinction between “route components” and “route rendering components” seen in v5, leading to a cleaner, more predictable API.

Migration Strategies

1. Using the Backwards Compatibility Package

The recommended approach is to use react-router-dom-v5-compat, which enables incremental migration. According to the official documentation, “the backwards compatibility package enables React Router web apps to incrementally migrate to the latest API in v6 by running it in parallel with v5.”

Steps for compatibility package migration:

1. Install both versions: npm install react-router-dom@^5.3.0 react-router-dom@^6.0.0
2. Import from react-router-dom-v5-compat for components you’re migrating
3. Gradually replace v5 imports with v6 imports
4. Once all components use v6 APIs, remove the compatibility package

2. Full Migration Approach

For complete migration, follow these steps:

Phase 1: Infrastructure Changes

• Replace <Switch> with <Routes>
• Change component props to element props
• Update exact prop usage (v6 doesn’t need exact for root routes)

Phase 2: Logic Refactoring

• Convert custom route components to use hooks
• Replace useRouteMatch with useMatch
• Update navigation patterns (use Navigate instead of Redirect)

Phase 3: Testing

• Ensure all routes work correctly
• Test nested routing and layout components
• Verify authentication guards and route protection

The LogRocket migration guide provides comprehensive examples for each of these phases.

Which Version Should You Choose?

Choose React Router v5 if:

• You’re maintaining an existing v5 application with no immediate need for new features
• Your project heavily relies on custom route components that would be difficult to refactor
• You need more time to plan the migration and want to use the compatibility package
• Your team is more familiar with v5’s patterns and the learning curve for v6 would be significant

Choose React Router v6+ if:

• You’re starting a new project and want the latest features and best practices
• You want better performance and bundle size improvements
• You prefer hooks-based routing over component-based approaches
• You want long-term support and access to future React Router features
• Your application has complex routing needs that benefit from v6’s improved architecture

The Middle Ground: Gradual Migration

Many teams find success with a hybrid approach:

1. Start using the compatibility package immediately
2. Migrate one route at a time from v5 to v6 patterns
3. Keep the core v5 infrastructure while upgrading individual components
4. Eventually migrate completely to v6 when all components are updated

This approach, as recommended by the React Router team, allows you to benefit from v6 improvements while minimizing disruption to your existing codebase.

Conclusion

• React Router v5 is still usable in 2023 through the backwards compatibility package, but it’s no longer actively maintained
• v6+ offers significant improvements in performance, API consistency, and modern React patterns, but removes support for custom route components
• Custom route components in v5 provided flexibility but created complexity; v6+ addresses this with hooks and simplified patterns
• For new projects, v6+ is clearly the better choice
• For existing v5 applications, consider your project’s complexity and team expertise when deciding whether to migrate
• The compatibility package provides a safe path for gradual migration from v5 to v6+ patterns

Ultimately, the decision depends on your project’s specific needs, but most teams should plan to migrate to v6+ within the next 12-18 months to benefit from ongoing development and support.

Sources

1. React Router Official Upgrading Guide from v5
2. Stack Overflow: Upgrading from react router v5 to v6
3. React Router v5 to v6 Migration Guide
4. GeeksforGeeks: React Router V5 vs V6
5. Stack Overflow: React-Router-Dom V6 Vs V5
6. DEV Community: Difference Between React Router DOM v5 & v6
7. GitHub Discussion: Official v5 to v6 Migration Guide
8. Medium: Migrating Gradually from React Router DOM v5 to v6
9. LogRocket: Migrating to React Router v6: A complete guide
10. Apiumhub: Why You Should Consider Using React Router v6