Upgrade react-router-dom to version 6.9.0

[depfu]

Here is everything you need to know about this upgrade. Please take a good look at what changed and the test results before merging this pull request.

What changed?

✳️ react-router-dom (^5.2.0 → ^6.9.0) · Repo · Changelog

Release Notes

6.9.0 (from changelog)

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

Does any of this look wrong? Please let us know.

---

Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

All Depfu comment commands

@​depfu rebase

Rebases against your default branch and redoes this update

@​depfu recreate

Recreates this PR, overwriting any edits that you've made to it

@​depfu merge

Merges this PR once your tests are passing and conflicts are resolved

@​depfu close

Closes this PR and deletes the branch

@​depfu reopen

Restores the branch and reopens this PR (if it's closed)

@​depfu pause

Ignores all future updates for this dependency and closes this PR

@​depfu pause [minor|major]

Ignores all future minor/major updates for this dependency and closes this PR

@​depfu resume

Future versions of this dependency will create PRs again (leaves this PR as is)

[depfu]

Closed in favor of #120.