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/[email protected]@6.22.2)

##### Patch Changes

-   Updated dependencies:
    -   `@remix-run/[email protected]`
    -   `[email protected]`

###
[`v6.22.1`](https://togithub.com/remix-run/react-router/compare/[email protected]@6.22.1)

[Compare
Source](https://togithub.com/remix-run/react-router/compare/[email protected]@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/[email protected]@6.22.0)

##### Minor Changes

- Include a `window__reactRouterVersion` tag for CWV Report detection
([#&#8203;11222](https://togithub.com/remix-run/react-router/pull/11222))

##### Patch Changes

-   Updated dependencies:
    -   `@remix-run/[email protected]`
    -   `[email protected]`

###
[`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/[email protected]@6.21.3)

##### Patch Changes

- Fix `NavLink` `isPending` when a `basename` is used
([#&#8203;11195](https://togithub.com/remix-run/react-router/pull/11195))
- Remove leftover `unstable_` prefix from `Blocker`/`BlockerFunction`
types
([#&#8203;11187](https://togithub.com/remix-run/react-router/pull/11187))
-   Updated dependencies:
    -   `[email protected]`

###
[`v6.21.2`](https://togithub.com/remix-run/react-router/compare/[email protected]@6.21.2)

[Compare
Source](https://togithub.com/remix-run/react-router/compare/[email protected]@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/[email protected]@6.21.1)

##### Patch Changes

-   Updated dependencies:
    -   `[email protected]`
    -   `@remix-run/[email protected]`

###
[`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/[email protected]@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.
([#&#8203;11087](https://togithub.com/remix-run/react-router/pull/11087))

This fix was originally added in
[#&#8203;10983](https://togithub.com/remix-run/react-router/issues/10983)
and was later reverted in
[#&#8203;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
[#&#8203;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/[email protected]`
    -   `[email protected]`

</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>