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.

Top comments (0)