Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(deps): update dependency react-router-dom to v6.22.2 (#30)
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [react-router-dom](https://togithub.com/remix-run/react-router) ([source](https://togithub.com/remix-run/react-router/tree/HEAD/packages/react-router-dom)) | [`6.20.1` -> `6.22.2`](https://renovatebot.com/diffs/npm/react-router-dom/6.20.1/6.22.2) | [![age](https://developer.mend.io/api/mc/badges/age/npm/react-router-dom/6.22.2?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-router-dom/6.22.2?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-router-dom/6.20.1/6.22.2?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-router-dom/6.20.1/6.22.2?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>remix-run/react-router (react-router-dom)</summary> ### [`v6.22.2`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#6222) [Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.22.1...react-router-dom@6.22.2) ##### Patch Changes - Updated dependencies: - `@remix-run/router@1.15.2` - `react-router@6.22.2` ### [`v6.22.1`](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.22.0...react-router-dom@6.22.1) [Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.22.0...react-router-dom@6.22.1) ### [`v6.22.0`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#6220) [Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.21.3...react-router-dom@6.22.0) ##### Minor Changes - Include a `window__reactRouterVersion` tag for CWV Report detection ([#​11222](https://togithub.com/remix-run/react-router/pull/11222)) ##### Patch Changes - Updated dependencies: - `@remix-run/router@1.15.0` - `react-router@6.22.0` ### [`v6.21.3`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#6213) [Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.21.2...react-router-dom@6.21.3) ##### Patch Changes - Fix `NavLink` `isPending` when a `basename` is used ([#​11195](https://togithub.com/remix-run/react-router/pull/11195)) - Remove leftover `unstable_` prefix from `Blocker`/`BlockerFunction` types ([#​11187](https://togithub.com/remix-run/react-router/pull/11187)) - Updated dependencies: - `react-router@6.21.3` ### [`v6.21.2`](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.21.1...react-router-dom@6.21.2) [Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.21.1...react-router-dom@6.21.2) ### [`v6.21.1`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#6211) [Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.21.0...react-router-dom@6.21.1) ##### Patch Changes - Updated dependencies: - `react-router@6.21.1` - `@remix-run/router@1.14.1` ### [`v6.21.0`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#6210) [Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.20.1...react-router-dom@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](https://togithub.com/remix-run/react-router/pull/11087)) This fix was originally added in [#​10983](https://togithub.com/remix-run/react-router/issues/10983) and was later reverted in [#​11078](https://togithub.com/remix-run/react-router/pull/11078) because it was determined that a large number of existing applications were relying on the buggy behavior (see [#​11052](https://togithub.com/remix-run/react-router/issues/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: ```jsx <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>`: ```jsx function Dashboard() { return ( <div> <h2>Dashboard</h2> <nav> <Link to="/">Dashboard Home</Link> <Link to="team">Team</Link> <Link to="projects">Projects</Link> </nav> <Routes> <Route path="/" element={<DashboardHome />} /> <Route path="team" element={<DashboardTeam />} /> <Route path="projects" element={<DashboardProjects />} /> </Routes> </div> ); } ``` 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** The problem is that this concept of ignoring part of a path breaks a lot of other assumptions in React Router - namely that `"."` always means the current location pathname for that route. When we ignore the splat portion, we start getting invalid paths when using `"."`: ```jsx // If we are on URL /dashboard/team, and we want to link to /dashboard/team: function DashboardTeam() { // ❌ This is broken and results in <a href="/dashboard"> return <Link to=".">A broken link to the Current URL</Link>; // ✅ This is fixed but super unintuitive since we're already at /dashboard/team! return <Link to="./team">A broken link to the Current URL</Link>; } ``` We've also introduced an issue that we can no longer move our `DashboardTeam` component around our route hierarchy easily - since it behaves differently if we're underneath a non-splat route, such as `/dashboard/:widget`. Now, our `"."` links will, properly point to ourself *inclusive of the dynamic param value* so behavior will break from it's corresponding usage in a `/dashboard/*` route. Even worse, consider a nested splat route configuration: ```jsx <BrowserRouter> <Routes> <Route path="dashboard"> <Route path="*" element={<Dashboard />} /> </Route> </Routes> </BrowserRouter> ``` Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard` component go to the same place! That is definitely not correct! Another common issue arose in Data Routers (and Remix) where any `<Form>` should post to it's own route `action` if you the user doesn't specify a form action: ```jsx let router = createBrowserRouter({ path: "/dashboard", children: [ { path: "*", action: dashboardAction, Component() { // ❌ This form is broken! It throws a 405 error when it submits because // it tries to submit to /dashboard (without the splat value) and the parent // `/dashboard` route doesn't have an action return <Form method="post">...</Form>; }, }, ], }); ``` This is just a compounded issue from the above because the default location for a `Form` to submit to is itself (`"."`) - and if we ignore the splat portion, that now resolves to the parent route. **The Solution** If you are leveraging this behavior, it's recommended to enable the future flag, move your splat to it's own route, and leverage `../` for any links to "sibling" pages: ```jsx <BrowserRouter> <Routes> <Route path="dashboard"> <Route index path="*" element={<Dashboard />} /> </Route> </Routes> </BrowserRouter> function Dashboard() { return ( <div> <h2>Dashboard</h2> <nav> <Link to="..">Dashboard Home</Link> <Link to="../team">Team</Link> <Link to="../projects">Projects</Link> </nav> <Routes> <Route path="/" element={<DashboardHome />} /> <Route path="team" element={<DashboardTeam />} /> <Route path="projects" element={<DashboardProjects />} /> </Router> </div> ); } ``` This way, `.` means "the full current pathname for my route" in all cases (including static, dynamic, and splat routes) and `..` always means "my parents pathname". ##### Patch Changes - Updated dependencies: - `@remix-run/router@1.14.0` - `react-router@6.21.0` </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/PingCAP-QE/ee-apps). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy44MS4zIiwidXBkYXRlZEluVmVyIjoiMzcuMjEyLjAiLCJ0YXJnZXRCcmFuY2giOiJtYWluIn0=--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
- Loading branch information