Skip to content

Bump react-router-dom from 6.8.1 to 6.21.0

Bumps react-router-dom from 6.8.1 to 6.21.0.

Release notes

Sourced from react-router-dom's releases.

react-router-dom-v5-compat@6.4.0-pre.15

Patch Changes

  • Updated dependencies
    • react-router@6.4.0-pre.15
    • react-router-dom@6.4.0-pre.15

react-router-dom-v5-compat@6.4.0-pre.11

Patch Changes

  • Updated dependencies
    • react-router@6.4.0-pre.11
    • react-router-dom@6.4.0-pre.11

react-router-dom-v5-compat@6.4.0-pre.10

Patch Changes

  • Updated dependencies
    • react-router@6.4.0-pre.10
    • react-router-dom@6.4.0-pre.10

react-router-dom-v5-compat@6.4.0-pre.9

Patch Changes

  • Updated dependencies
    • react-router@6.4.0-pre.9
    • react-router-dom@6.4.0-pre.9

react-router-dom-v5-compat@6.4.0-pre.8

Patch Changes

  • Updated dependencies
    • react-router@6.4.0-pre.8
    • react-router-dom@6.4.0-pre.8

react-router-dom-v5-compat@6.4.0-pre.7

Patch Changes

  • Updated dependencies
    • react-router@6.4.0-pre.7
    • react-router-dom@6.4.0-pre.7

react-router-dom-v5-compat@6.4.0-pre.6

Patch Changes

  • 44bce3c6: Fix react-router-dom peer dependency version
    • react-router@6.4.0-pre.6
    • react-router-dom@6.4.0-pre.6

react-router-dom-v5-compat@6.4.0-pre.5

... (truncated)

Changelog

Sourced from react-router-dom's changelog.

6.21.0

Minor Changes

  • Add a new future.v7_relativeSplatPath flag to implement a breaking bug fix to relative routing when inside a splat route. (#11087)

    This fix was originally added in #10983 and was later reverted in #11078 because it was determined that a large number of existing applications were relying on the buggy behavior (see #11052)

    The Bug The buggy behavior is that without this flag, the default behavior when resolving relative paths is to ignore any splat (*) portion of the current route path.

    The Background This decision was originally made thinking that it would make the concept of nested different sections of your apps in <Routes> easier if relative routing would replace the current splat:

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="dashboard/*" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>

    Any paths like /dashboard, /dashboard/team, /dashboard/projects will match the Dashboard route. The dashboard component itself can then render nested <Routes>:

    function Dashboard() {
      return (
        <div>
          <h2>Dashboard</h2>
          <nav>
            <Link to="/">Dashboard Home</Link>
            <Link to="team">Team</Link>
            <Link to="projects">Projects</Link>
          </nav>
      &lt;Routes&gt;
        &lt;Route path=&quot;/&quot; element={&lt;DashboardHome /&gt;} /&gt;
        &lt;Route path=&quot;team&quot; element={&lt;DashboardTeam /&gt;} /&gt;
        &lt;Route path=&quot;projects&quot; element={&lt;DashboardProjects /&gt;} /&gt;
      &lt;/Routes&gt;
    &lt;/div&gt;
    
    );
    }

    Now, all links and route paths are relative to the router above them. This makes code splitting and compartmentalizing your app really easy. You could render the Dashboard as its own independent app, or embed it into your large app without making any changes to it.

    The Problem

... (truncated)

Commits

Merge request reports