fix(deps): update dependency react-router-dom to v6.10.0

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
react-router-dom	6.8.1 -> 6.10.0

---

Release Notes

remix-run/react-router

v6.10.0

Compare Source

Minor Changes

• Added support for Future Flags in React Router. The first flag being introduced is future.v7_normalizeFormMethod which will normalize the exposed useNavigation()/useFetcher() formMethod fields as uppercase HTTP methods to align with the fetch() behavior. (#​10207)

  • When future.v7_normalizeFormMethod === false (default v6 behavior),
    • useNavigation().formMethod is lowercase
    • useFetcher().formMethod is lowercase
  • When future.v7_normalizeFormMethod === true:
    • useNavigation().formMethod is uppercase
    • useFetcher().formMethod is uppercase

Patch Changes

• Fix createStaticHandler to also check for ErrorBoundary on routes in addition to errorElement (#​10190)
• Updated dependencies:
  • @remix-run/router@1.5.0
  • react-router@6.10.0

v6.9.0

Compare Source

Minor Changes

• React Router now supports an alternative way to define your route element and errorElement fields as React Components instead of React Elements. You can instead pass a React Component to the new Component and ErrorBoundary fields if you choose. There is no functional difference between the two, so use whichever approach you prefer 😀. You shouldn't be defining both, but if you do Component/ErrorBoundary will "win". (#​10045)

  Example JSON Syntax

  // Both of these work the same:
  const elementRoutes = [{
    path: '/',
    element: <Home />,
    errorElement: <HomeError />,
  }]
  
  const componentRoutes = [{
    path: '/',
    Component: Home,
    ErrorBoundary: HomeError,
  }]
  
  function Home() { ... }
  function HomeError() { ... }

  Example JSX Syntax

  // Both of these work the same:
  const elementRoutes = createRoutesFromElements(
    <Route path='/' element={<Home />} errorElement={<HomeError /> } />
  );
  
  const componentRoutes = createRoutesFromElements(
    <Route path='/' Component={Home} ErrorBoundary={HomeError} />
  );
  
  function Home() { ... }
  function HomeError() { ... }

• Introducing Lazy Route Modules! (#​10045)

  In order to keep your application bundles small and support code-splitting of your routes, we've introduced a new lazy() route property. This is an async function that resolves the non-route-matching portions of your route definition (loader, action, element/Component, errorElement/ErrorBoundary, shouldRevalidate, handle).

  Lazy routes are resolved on initial load and during the loading or submitting phase of a navigation or fetcher call. You cannot lazily define route-matching properties (path, index, children) since we only execute your lazy route functions after we've matched known routes.

  Your lazy functions will typically return the result of a dynamic import.

  // In this example, we assume most folks land on the homepage so we include that
  // in our critical-path bundle, but then we lazily load modules for /a and /b so
  // they don't load until the user navigates to those routes
  let routes = createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="a" lazy={() => import("./a")} />
      <Route path="b" lazy={() => import("./b")} />
    </Route>
  );

  Then in your lazy route modules, export the properties you want defined for the route:

  export async function loader({ request }) {
    let data = await fetchData(request);
    return json(data);
  }
  
  // Export a `Component` directly instead of needing to create a React Element from it
  export function Component() {
    let data = useLoaderData();
  
    return (
      <>
        <h1>You made it!</h1>
        <p>{data}</p>
      </>
    );
  }
  
  // Export an `ErrorBoundary` directly instead of needing to create a React Element from it
  export function ErrorBoundary() {
    let error = useRouteError();
    return isRouteErrorResponse(error) ? (
      <h1>
        {error.status} {error.statusText}
      </h1>
    ) : (
      <h1>{error.message || error}</h1>
    );
  }

  An example of this in action can be found in the examples/lazy-loading-router-provider directory of the repository.

  🙌 Huge thanks to @​rossipedia for the Initial Proposal and POC Implementation.

• Updated dependencies:

  • react-router@6.9.0
  • @remix-run/router@1.4.0

v6.8.2

Compare Source

Patch Changes

• Treat same-origin absolute URLs in <Link to> as external if they are outside of the router basename (#​10135)
• Fix useBlocker to return IDLE_BLOCKER during SSR (#​10046)
• Fix SSR of absolute <Link to> urls (#​10112)
• Properly escape HTML characters in StaticRouterProvider serialized hydration data (#​10068)
• Updated dependencies:
  • @remix-run/router@1.3.3
  • react-router@6.8.2

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ 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.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Mend Renovate. View repository job log here.

[replay-io]

15 replays were recorded for d03fd6d.

0 Failed

15 Passed

• useAuth hook, auth redirects checks
• Check that a specific blog post is prerendered
• Check that about is prerendered
• Check that homepage is prerendered
• Check that meta-tags are rendering the correct dynamic data
• Check that you can navigate from home page to specific blog post
• Waterfall prerendering (nested cells)
• RBAC: Admin user should be able to delete contacts
• RBAC: Should not be able to delete contact as non-admin user
• Smoke test with dev server
• Smoke test with rw serve
• Loads Cell mocks when Cell is nested in another story
• Loads Cell Stories
• Loads MDX Stories
• Mocks current user, and updates UI while dev server is running

View test run on Replay ↗︎

[replay-io]

16 replays were recorded for b638efc.

0 Failed

16 Passed

requireAuth graphql checks

    ```
    locator.waitFor: Target closed
    =========================== logs ===========================
    waiting for locator('.rw-form-error-title').locator('text=You don\'t have permission to do that') to be visible
    ============================================================
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/53cae4b4-d971-4f23-af80-ebc385201749>useAuth hook, auth redirects checks</a></li>
<li><a href=https://app.replay.io/recording/494c91ef-6cdc-412a-88d7-239b2025f879>Check that a specific blog post is prerendered</a></li>
<li><a href=https://app.replay.io/recording/0883c866-ab93-4c6b-89f9-02e0c5bcf1f8>Check that about is prerendered</a></li>
<li><a href=https://app.replay.io/recording/e8909008-4857-40d4-96ce-caf48272df35>Check that homepage is prerendered</a></li>
<li><a href=https://app.replay.io/recording/d333131c-e2d1-4235-8fd7-251f6814d2c5>Check that meta-tags are rendering the correct dynamic data</a></li>
<li><a href=https://app.replay.io/recording/ad2f46a4-c0fc-4f63-852d-941d73b2aa71>Check that you can navigate from home page to specific blog post</a></li>
<li><a href=https://app.replay.io/recording/d111ec11-0267-4d3f-bfe5-b1d035e9c4c4>Waterfall prerendering (nested cells)</a></li>
<li><a href=https://app.replay.io/recording/a05685aa-b8d6-417a-b9fb-b154db5bdea3>RBAC: Admin user should be able to delete contacts</a></li>
<li><a href=https://app.replay.io/recording/d5ff728e-ad6b-4a55-aeed-b8f933be8790>RBAC: Should not be able to delete contact as non-admin user</a></li>
<li><a href=https://app.replay.io/recording/e722d0c8-df1f-4293-95fa-d85cc0c71e08>Smoke test with dev server</a></li>
<li><a href=https://app.replay.io/recording/a64d81ea-d79c-4f18-9caf-2faa0826fa56>Smoke test with rw serve</a></li>
<li><a href=https://app.replay.io/recording/91d28eb8-9716-458f-9cc4-423dffe5d1a9>Loads Cell mocks when Cell is nested in another story</a></li>
<li><a href=https://app.replay.io/recording/35ac978d-0931-42bf-86d8-168107d5ea16>Loads Cell Stories</a></li>
<li><a href=https://app.replay.io/recording/47e026d2-c51d-485e-a197-06b53eec6635>Loads MDX Stories</a></li>
<li><a href=https://app.replay.io/recording/226130a4-f871-4f41-95cc-9cfebb1257e0>Mocks current user, and updates UI while dev server is running</a></li>

View test run on Replay ↗︎