DEV Community

Md Yusuf
Md Yusuf

Posted on

React Router v5 vs v6: Key Differences Explained

React Router v6 introduced significant improvements and changes compared to v5. Here’s a breakdown of the key differences:

1. Switch vs Routes

  • v5: Uses Switch to wrap your routes.
  <Switch>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </Switch>
Enter fullscreen mode Exit fullscreen mode
  • v6: Replaces Switch with Routes, and component is replaced with element which requires JSX.
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
Enter fullscreen mode Exit fullscreen mode

2. No More exact Prop

  • v5: You need the exact prop to avoid partial matches in routes.
  <Route path="/" exact component={Home} />
Enter fullscreen mode Exit fullscreen mode
  • v6: All routes are exact by default, so no need for the exact prop anymore.

3. Nested Routes

  • v5: Nested routes are created by placing Route components inside the parent’s component.
  function App() {
    return (
      <Switch>
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/dashboard/settings" component={Settings} />
      </Switch>
    );
  }
Enter fullscreen mode Exit fullscreen mode
  • v6: Nested routes are directly declared within the Routes structure.
  <Routes>
    <Route path="/dashboard" element={<Dashboard />}>
      <Route path="settings" element={<Settings />} />
    </Route>
  </Routes>
Enter fullscreen mode Exit fullscreen mode

4. useNavigate vs useHistory

  • v5: useHistory() was used for programmatic navigation.
  const history = useHistory();
  history.push('/about');
Enter fullscreen mode Exit fullscreen mode
  • v6: Replaces useHistory with useNavigate().
  const navigate = useNavigate();
  navigate('/about');
Enter fullscreen mode Exit fullscreen mode

5. Route Rendering Methods

  • v5: You could use component, render, or children props to render components.
  <Route path="/" component={Home} />
  <Route path="/about" render={() => <About />} />
Enter fullscreen mode Exit fullscreen mode
  • v6: Removes component and render. You now use only element for JSX rendering.
  <Route path="/" element={<Home />} />
Enter fullscreen mode Exit fullscreen mode

6. Relative Routes

  • v5: When navigating, you needed to construct absolute paths.
  <Link to="/dashboard/settings">Settings</Link>
Enter fullscreen mode Exit fullscreen mode
  • v6: Supports relative paths based on the current route.
  <Link to="settings">Settings</Link>
Enter fullscreen mode Exit fullscreen mode

7. Redirect vs Navigate

  • v5: Used the Redirect component to handle route redirects.
  <Redirect to="/login" />
Enter fullscreen mode Exit fullscreen mode
  • v6: Replaces Redirect with Navigate.
  <Navigate to="/login" />
Enter fullscreen mode Exit fullscreen mode

8. Hooks API Improvements

  • v6: Simplified hooks, like useParams, useNavigate, useRoutes for greater flexibility.

Summary of Key Changes:

  • Switch replaced by Routes.
  • exact prop no longer needed.
  • More intuitive nested routes structure.
  • useHistory replaced by useNavigate.
  • Routes are rendered using the element prop exclusively.

These changes streamline the API and make route handling simpler in React Router v6.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Retry later
👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay