chore(deps): update react-router monorepo #944

renovate · 2024-11-25T07:13:08Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@react-router/dev (source)	`7.0.0-pre.1` -> `7.0.1`
@react-router/node (source)	`7.0.0-pre.1` -> `7.0.1`
@react-router/serve (source)	`7.0.0-pre.1` -> `7.0.1`
react-router (source)	`7.0.0-pre.1` -> `7.0.1`
react-router-dom (source)	`6.16.0` -> `6.28.0`

Release Notes

remix-run/react-router (@react-router/dev)

`v7.0.1`

Compare Source

Patch Changes

Ensure typegen file watcher is cleaned up when Vite dev server restarts (#12331)
Updated dependencies:
- [email protected]
- @react-router/[email protected]
- @react-router/[email protected]

`v7.0.0`

Compare Source

Major Changes

For Remix consumers migrating to React Router, the vitePlugin and cloudflareDevProxyVitePlugin exports have been renamed and moved. (#11904)

-import {
-  vitePlugin as remix,
-  cloudflareDevProxyVitePlugin,
-} from "@&#8203;remix/dev";

+import { reactRouter } from "@&#8203;react-router/dev/vite";
+import { cloudflareDevProxy } from "@&#8203;react-router/dev/vite/cloudflare";

Remove single_fetch future flag. (#11522)
update minimum node version to 18 (#11690)
Add exports field to all packages (#11675)
node package no longer re-exports from react-router (#11702)
For Remix consumers migrating to React Router who used the Vite plugin's buildEnd hook, the resolved reactRouterConfig object no longer contains a publicPath property since this belongs to Vite, not React Router. (#11575)
For Remix consumers migrating to React Router, the Vite plugin's manifest option has been removed. (#11573)

The manifest option been superseded by the more powerful buildEnd hook since it's passed the buildManifest argument. You can still write the build manifest to disk if needed, but you'll most likely find it more convenient to write any logic depending on the build manifest within the buildEnd hook itself.

If you were using the manifest option, you can replace it with a buildEnd hook that writes the manifest to disk like this:
```
// react-router.config.ts
import type { Config } from "@&#8203;react-router/dev/config";
import { writeFile } from "node:fs/promises";

export default {
  async buildEnd({ buildManifest }) {
    await writeFile(
      "build/manifest.json",
      JSON.stringify(buildManifest, null, 2),
      "utf-8"
    );
  },
} satisfies Config;
```
Consolidate types previously duplicated across @remix-run/router, @remix-run/server-runtime, and @remix-run/react now that they all live in react-router (#12177)
- Examples: LoaderFunction, LoaderFunctionArgs, ActionFunction, ActionFunctionArgs, DataFunctionArgs, RouteManifest, LinksFunction, Route, EntryRoute
- The RouteManifest type used by the "remix" code is now slightly stricter because it is using the former @remix-run/router RouteManifest
  - Record<string, Route> -> Record<string, Route | undefined>
- Removed AppData type in favor of inlining unknown in the few locations it was used
- Removed ServerRuntimeMeta* types in favor of the Meta* types they were duplicated from
Update default isbot version to v5 and drop support for isbot@3 (#11770)
- If you have isbot@4 or isbot@5 in your package.json:
  - You do not need to make any changes
- If you have isbot@3 in your package.json and you have your own entry.server.tsx file in your repo
  - You do not need to make any changes
  - You can upgrade to isbot@5 independent of the React Router v7 upgrade
- If you have isbot@3 in your package.json and you do not have your own entry.server.tsx file in your repo
  - You are using the internal default entry provided by React Router v7 and you will need to upgrade to isbot@5 in your package.json
Drop support for Node 18, update minimum Node vestion to 20 (#12171)
- Remove installGlobals() as this should no longer be necessary
For Remix consumers migrating to React Router, Vite manifests (i.e. .vite/manifest.json) are now written within each build subdirectory, e.g. build/client/.vite/manifest.json and build/server/.vite/manifest.json instead of build/.vite/client-manifest.json and build/.vite/server-manifest.json. This means that the build output is now much closer to what you'd expect from a typical Vite project. (#11573)

Originally the Remix Vite plugin moved all Vite manifests to a root-level build/.vite directory to avoid accidentally serving them in production, particularly from the client build. This was later improved with additional logic that deleted these Vite manifest files at the end of the build process unless Vite's build.manifest had been enabled within the app's Vite config. This greatly reduced the risk of accidentally serving the Vite manifests in production since they're only present when explicitly asked for. As a result, we can now assume that consumers will know that they need to manage these additional files themselves, and React Router can safely generate a more standard Vite build output.

Minor Changes

Params, loader data, and action data as props for route component exports (#11961)

export default function Component({ params, loaderData, actionData }) {}

export function HydrateFallback({ params }) {}
export function ErrorBoundary({ params, loaderData, actionData }) {}

Remove internal entry.server.spa.tsx implementation (#11681)
Add prefix route config helper to @react-router/dev/routes (#12094)
Typesafety improvements (#12019)

React Router now generates types for each of your route modules.
You can access those types by importing them from ./+types.<route filename without extension>.
For example:
```
// app/routes/product.tsx
import type * as Route from "./+types.product";

export function loader({ params }: Route.LoaderArgs) {}

export default function Component({ loaderData }: Route.ComponentProps) {}
```
This initial implementation targets type inference for:
- Params : Path parameters from your routing config in routes.ts including file-based routing
- LoaderData : Loader data from loader and/or clientLoader within your route module
- ActionData : Action data from action and/or clientAction within your route module
In the future, we plan to add types for the rest of the route module exports: meta, links, headers, shouldRevalidate, etc.
We also plan to generate types for typesafe Links:
```
<Link to="/products/:id" params={{ id: 1 }} />
//        ^^^^^^^^^^^^^          ^^^^^^^^^
// typesafe `to` and `params` based on the available routes in your app
```
Check out our docs for more:
- Explanations > Type Safety
- How-To > Setting up type safety

Patch Changes

Enable prerendering for resource routes (#12200)
chore: warn instead of error for min node version in CLI (#12270)
chore: re-enable development warnings through a development exports condition. (#12269)
include root "react-dom" module for optimization (#12060)
resolve config directory relative to flat output file structure (#12187)
if we are in SAP mode, always render the index.html for hydration (#12268)
fix(react-router): (v7) fix static prerender of non-ascii characters (#12161)
Updated dependencies:
- [email protected]
- @react-router/[email protected]
- @react-router/[email protected]

remix-run/react-router (@react-router/node)

`v7.0.1`

Compare Source

Patch Changes

Updated dependencies:
- [email protected]

`v7.0.0`

Compare Source

Major Changes

Remove single_fetch future flag. (#11522)
For Remix consumers migrating to React Router, the crypto global from the Web Crypto API is now required when using cookie and session APIs. This means that the following APIs are provided from react-router rather than platform-specific packages: (#11837)
- createCookie
- createCookieSessionStorage
- createMemorySessionStorage
- createSessionStorage
For consumers running older versions of Node, the installGlobals function from @remix-run/node has been updated to define globalThis.crypto, using Node's require('node:crypto').webcrypto implementation.

Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed:
- createCookieFactory
- createSessionStorageFactory
- createCookieSessionStorageFactory
- createMemorySessionStorageFactory
update minimum node version to 18 (#11690)
Add exports field to all packages (#11675)
node package no longer re-exports from react-router (#11702)
Drop support for Node 18, update minimum Node vestion to 20 (#12171)
- Remove installGlobals() as this should no longer be necessary

Patch Changes

Add createRequestListener to @react-router/node (#12319)
Remove unstable upload handler. (#12015)
Remove unneeded dependency on @web3-storage/multipart-parser (#12274)
Updated dependencies:
- [email protected]

`v7.0.0-pre.6`

Compare Source

`v7.0.0-pre.5`

Compare Source

`v7.0.0-pre.4`

Compare Source

`v7.0.0-pre.3`

Compare Source

`v7.0.0-pre.2`

Compare Source

remix-run/react-router (@react-router/serve)

`v7.0.1`

Compare Source

Patch Changes

Updated dependencies:
- [email protected]
- @react-router/[email protected]
- @react-router/[email protected]

`v7.0.0`

Compare Source

Major Changes

Remove single_fetch future flag. (#11522)
update minimum node version to 18 (#11690)
Add exports field to all packages (#11675)
node package no longer re-exports from react-router (#11702)

Patch Changes

Update express.static configurations to support prerendering (#11547)
- Assets in the build/client/assets folder are served as before, with a 1-year immutable Cache-Control header
- Static files outside of assets, such as pre-rendered .html and .data files are not served with a specific Cache-Control header
- .data files are served with Content-Type: text/x-turbo
  - For some reason, when adding this via express.static, it seems to also add a Cache-Control: public, max-age=0 to .data files
Updated dependencies:
- [email protected]
- @react-router/[email protected]
- @react-router/[email protected]

`v7.0.0-pre.6`

Compare Source

`v7.0.0-pre.5`

Compare Source

`v7.0.0-pre.4`

Compare Source

`v7.0.0-pre.3`

Compare Source

`v7.0.0-pre.2`

Compare Source

remix-run/react-router (react-router)

`v7.0.1`

Compare Source

`v7.0.0`

Compare Source

Major Changes

Remove the original defer implementation in favor of using raw promises via single fetch and turbo-stream. This removes these exports from React Router: (#11744)
- defer
- AbortedDeferredError
- type TypedDeferredData
- UNSAFE_DeferredData
- UNSAFE_DEFERRED_SYMBOL,
- Collapse @remix-run/router into react-router (#11505)
- Collapse react-router-dom into react-router
- Collapse @remix-run/server-runtime into react-router
- Collapse @remix-run/testing into react-router
Remove single_fetch future flag. (#11522)
Drop support for Node 16, React Router SSR now requires Node 18 or higher (#11391)
Remove future.v7_startTransition flag (#11696)
- Expose the underlying router promises from the following APIs for compsition in React 19 APIs: (#11521)
  - useNavigate()
  - useSubmit
  - useFetcher().load
  - useFetcher().submit
  - useRevalidator.revalidate
Remove future.v7_normalizeFormMethod future flag (#11697)
For Remix consumers migrating to React Router, the crypto global from the Web Crypto API is now required when using cookie and session APIs. This means that the following APIs are provided from react-router rather than platform-specific packages: (#11837)
- createCookie
- createCookieSessionStorage
- createMemorySessionStorage
- createSessionStorage
For consumers running older versions of Node, the installGlobals function from @remix-run/node has been updated to define globalThis.crypto, using Node's require('node:crypto').webcrypto implementation.

Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed:
- createCookieFactory
- createSessionStorageFactory
- createCookieSessionStorageFactory
- createMemorySessionStorageFactory
Imports/Exports cleanup (#11840)
- Removed the following exports that were previously public API from @remix-run/router
  - types
    - AgnosticDataIndexRouteObject
    - AgnosticDataNonIndexRouteObject
    - AgnosticDataRouteMatch
    - AgnosticDataRouteObject
    - AgnosticIndexRouteObject
    - AgnosticNonIndexRouteObject
    - AgnosticRouteMatch
    - AgnosticRouteObject
    - TrackedPromise
    - unstable_AgnosticPatchRoutesOnMissFunction
    - Action -> exported as NavigationType via react-router
    - Router exported as DataRouter to differentiate from RR's <Router>
  - API
    - getToPathname (@private)
    - joinPaths (@private)
    - normalizePathname (@private)
    - resolveTo (@private)
    - stripBasename (@private)
    - createBrowserHistory -> in favor of createBrowserRouter
    - createHashHistory -> in favor of createHashRouter
    - createMemoryHistory -> in favor of createMemoryRouter
    - createRouter
    - createStaticHandler -> in favor of wrapper createStaticHandler in RR Dom
    - getStaticContextFromError
- Removed the following exports that were previously public API from react-router
  - Hash
  - Pathname
  - Search
update minimum node version to 18 (#11690)
Remove future.v7_prependBasename from the ionternalized @remix-run/router package (#11726)
Migrate Remix type generics to React Router (#12180)
- These generics are provided for Remix v2 migration purposes
- These generics and the APIs they exist on should be considered informally deprecated in favor of the new Route.* types
- Anyone migrating from React Router v6 should probably not leverage these new generics and should migrate straight to the Route.* types
- For React Router v6 users, these generics are new and should not impact your app, with one exception
  - useFetcher previously had an optional generic (used primarily by Remix v2) that expected the data type
  - This has been updated in v7 to expect the type of the function that generates the data (i.e., typeof loader/typeof action)
  - Therefore, you should update your usages:
    - ❌ useFetcher<LoaderData>()
    - ✅ useFetcher<typeof loader>()
Remove future.v7_throwAbortReason from internalized @remix-run/router package (#11728)
Add exports field to all packages (#11675)
node package no longer re-exports from react-router (#11702)
renamed RemixContext to FrameworkContext (#11705)
updates the minimum React version to 18 (#11689)
PrefetchPageDescriptor replaced by PageLinkDescriptor (#11960)
- Consolidate types previously duplicated across @remix-run/router, @remix-run/server-runtime, and @remix-run/react now that they all live in react-router (#12177)
  - Examples: LoaderFunction, LoaderFunctionArgs, ActionFunction, ActionFunctionArgs, DataFunctionArgs, RouteManifest, LinksFunction, Route, EntryRoute
  - The RouteManifest type used by the "remix" code is now slightly stricter because it is using the former @remix-run/router RouteManifest
    - Record<string, Route> -> Record<string, Route | undefined>
  - Removed AppData type in favor of inlining unknown in the few locations it was used
  - Removed ServerRuntimeMeta* types in favor of the Meta* types they were duplicated from
- Remove the future.v7_partialHydration flag (#11725)
  - This also removes the <RouterProvider fallbackElement> prop
    - To migrate, move the fallbackElement to a hydrateFallbackElement/HydrateFallback on your root route
  - Also worth nothing there is a related breaking changer with this future flag:
    - Without future.v7_partialHydration (when using fallbackElement), state.navigation was populated during the initial load
    - With future.v7_partialHydration, state.navigation remains in an "idle" state during the initial load
Remove v7_relativeSplatPath future flag (#11695)
Drop support for Node 18, update minimum Node vestion to 20 (#12171)
- Remove installGlobals() as this should no longer be necessary
Remove remaining future flags (#11820)
- React Router v7_skipActionErrorRevalidation
- Remix v3_fetcherPersist, v3_relativeSplatPath, v3_throwAbortReason
rename createRemixStub to createRoutesStub (#11692)
Remove @remix-run/router deprecated detectErrorBoundary option in favor of mapRouteProperties (#11751)
Add react-router/dom subpath export to properly enable react-dom as an optional peerDependency (#11851)
- This ensures that we don't blindly import ReactDOM from "react-dom" in <RouterProvider> in order to access ReactDOM.flushSync(), since that would break createMemoryRouter use cases in non-DOM environments
- DOM environments should import from react-router/dom to get the proper component that makes ReactDOM.flushSync() available:
  - If you are using the Vite plugin, use this in your entry.client.tsx:
    - import { HydratedRouter } from 'react-router/dom'
  - If you are not using the Vite plugin and are manually calling createBrowserRouter/createHashRouter:
    - import { RouterProvider } from "react-router/dom"
Remove future.v7_fetcherPersist flag (#11731)
Update cookie dependency to ^1.0.1 - please see the release notes for any breaking changes (#12172)

Minor Changes

Add support for prerender config in the React Router vite plugin, to support existing SSG use-cases (#11539)
- You can use the prerender config to pre-render your .html and .data files at build time and then serve them statically at runtime (either from a running server or a CDN)
- prerender can either be an array of string paths, or a function (sync or async) that returns an array of strings so that you can dynamically generate the paths by talking to your CMS, etc.

// react-router.config.ts
import type { Config } from "@&#8203;react-router/dev/config";

export default {
  async prerender() {
    let slugs = await fakeGetSlugsFromCms();
    // Prerender these paths into `.html` files at build time, and `.data`
    // files if they have loaders
    return ["/", "/about", ...slugs.map((slug) => `/product/${slug}`)];
  },
} satisfies Config;

async function fakeGetSlugsFromCms() {
  await new Promise((r) => setTimeout(r, 1000));
  return ["shirt", "hat"];
}

Params, loader data, and action data as props for route component exports (#11961)

export default function Component({ params, loaderData, actionData }) {}

export function HydrateFallback({ params }) {}
export function ErrorBoundary({ params, loaderData, actionData }) {}

Remove duplicate RouterProvider impliementations (#11679)
Typesafety improvements (#12019)

React Router now generates types for each of your route modules.
You can access those types by importing them from ./+types.<route filename without extension>.
For example:
```
// app/routes/product.tsx
import type * as Route from "./+types.product";

export function loader({ params }: Route.LoaderArgs) {}

export default function Component({ loaderData }: Route.ComponentProps) {}
```
This initial implementation targets type inference for:
- Params : Path parameters from your routing config in routes.ts including file-based routing
- LoaderData : Loader data from loader and/or clientLoader within your route module
- ActionData : Action data from action and/or clientAction within your route module
In the future, we plan to add types for the rest of the route module exports: meta, links, headers, shouldRevalidate, etc.
We also plan to generate types for typesafe Links:
```
<Link to="/products/:id" params={{ id: 1 }} />
//        ^^^^^^^^^^^^^          ^^^^^^^^^
// typesafe `to` and `params` based on the available routes in your app
```
Check out our docs for more:
- Explanations > Type Safety
- How-To > Setting up type safety
Stabilize unstable_dataStrategy (#11969)
Stabilize unstable_patchRoutesOnNavigation (#11970)

Patch Changes

No changes (506329c4e)
chore: re-enable development warnings through a development exports condition. (#12269)
Remove unstable upload handler. (#12015)
Remove unneeded dependency on @web3-storage/multipart-parser (#12274)
Fix redirects returned from loaders/actions using data() (#12021)
fix(react-router): (v7) fix static prerender of non-ascii characters (#12161)
Replace substr with substring (#12080)
Remove the deprecated json utility (#12146)
- You can use Response.json if you still need to construct JSON responses in your app
Remove unneeded dependency on source-map (#12275)

`v7.0.0-pre.6`

Compare Source

`v7.0.0-pre.5`

Compare Source

`v7.0.0-pre.4`

Compare Source

`v7.0.0-pre.3`

Compare Source

`v7.0.0-pre.2`

Compare Source

remix-run/react-router (react-router-dom)

`v6.28.0`

Compare Source

Minor Changes

- Log deprecation warnings for v7 flags (#11750)
- Add deprecation warnings to json/defer in favor of returning raw objects
  - These methods will be removed in React Router v7

Patch Changes

Update JSDoc URLs for new website structure (add /v6/ segment) (#12141)
Updated dependencies:
- [email protected]
- @remix-run/[email protected]

`v6.27.0`

Compare Source

`v6.26.2`

Compare Source

`v6.26.1`

Compare Source

`v6.26.0`

Compare Source

Minor Changes

Add a new replace(url, init?) alternative to redirect(url, init?) that performs a history.replaceState instead of a history.pushState on client-side navigation redirects (#11811)

Patch Changes

Fix initial hydration behavior when using future.v7_partialHydration along with unstable_patchRoutesOnMiss (#11838)
- During initial hydration, router.state.matches will now include any partial matches so that we can render ancestor HydrateFallback components
Updated dependencies:
- @remix-run/[email protected]
- [email protected]

`v6.25.1`

Compare Source

Patch Changes

Memoize some RouterProvider internals to reduce unnecessary re-renders (#11803)
Updated dependencies:
- [email protected]

`v6.25.0`

Compare Source

Minor Changes

Stabilize future.unstable_skipActionErrorRevalidation as future.v7_skipActionErrorRevalidation (#11769)
- When this flag is enabled, actions will not automatically trigger a revalidation if they return/throw a Response with a 4xx/5xx status code
- You may still opt-into revalidation via shouldRevalidate
- This also changes shouldRevalidate's unstable_actionStatus parameter to actionStatus

Patch Changes

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

`v6.24.1`

Compare Source

Patch Changes

Remove polyfill.io reference from warning message because the domain was sold and has since been determined to serve malware (#11741)
- See https://sansec.io/research/polyfill-supply-chain-attack
Export NavLinkRenderProps type for easier typing of custom NavLink callback (#11553)
Updated dependencies:
- @remix-run/[email protected]
- [email protected]

`v6.24.0`

Compare Source

Minor Changes

Add support for Lazy Route Discovery (a.k.a. Fog of War) (#11626)
- RFC: https://redirect.github.com/remix-run/react-router/discussions/11113
- unstable_patchRoutesOnMiss docs: https://reactrouter.com/en/main/routers/create-browser-router

Patch Changes

Fix fetcher.submit types - remove incorrect navigate/fetcherKey/unstable_viewTransition options because they are only relevant for useSubmit (#11631)
Allow falsy location.state values passed to <StaticRouter> (#11495)
Updated dependencies:
- [email protected]
- @remix-run/[email protected]

`v6.23.1`

Compare Source

Patch Changes

Check for document existence when checking startViewTransition (#11544)
Change the react-router-dom/server import back to react-router-dom instead of index.ts (#11514)
Updated dependencies:
- @remix-run/[email protected]
- [email protected]

`v6.23.0`

Compare Source

Minor Changes

Add a new unstable_dataStrategy configuration option (#11098)
- This option allows Data Router applications to take control over the approach for executing route loaders and actions
- The default implementation is today's behavior, to fetch all loaders in parallel, but this option allows users to implement more advanced data flows including Remix single-fetch, middleware/context APIs, automatic loader caching, and more

Patch Changes

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

`v6.22.3`

Compare Source

Patch Changes

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

`v6.22.2`

Compare Source

Patch Changes

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

`v6.22.1`

Compare Source

`v6.22.0`

Compare Source

Minor Changes

Include a window__reactRouterVersion tag for CWV Report detection (#11222)

Patch Changes

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

`v6.21.3`

Compare Source

Patch Changes

Fix NavLink isPending when a basename is used (#11195)
Remove leftover unstable_ prefix from Blocker/BlockerFunction types (#11187)
Updated dependencies:
- [email protected]

`v6.21.2`

Compare Source

`v6.21.1`

Compare Source

Patch Changes

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

`v6.21.0`

Compare Source

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>

      <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 ".":

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

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

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:

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

`v6.20.1`

Compare Source

Patch Changes

Revert the useResolvedPath fix for splat routes due to a large number of applications that were relying on the buggy behavior (see https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329). We plan to re-introduce this fix behind a future flag in the next minor version. (#11078)
Updated dependencies:
- [email protected]
- @remix-run/[email protected]

`v6.20.0`

Compare Source

Minor Changes

Export the PathParam type from the public API (#10719)

Patch Changes

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

`v6.19.0`

Compare Source

Minor Changes

Add unstable_flushSync option to useNavigate/useSumbit/fetcher.load/fetcher.submit to opt-out of React.startTransition and into ReactDOM.flushSync for state updates (#11005)
Allow unstable_usePrompt to accept a BlockerFunction in addition to a boolean ([#10991](https://redirect.githu

Configuration

📅 Schedule: Branch creation - "after 1am and before 10am on Monday" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

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

This PR was generated by Mend Renovate. View the repository job log.

chore(deps): update react-router monorepo

10f3be8

renovate bot added the dependencies label Nov 25, 2024

renovate bot enabled auto-merge November 25, 2024 07:13

renovate-approve bot approved these changes Nov 25, 2024

View reviewed changes

renovate bot merged commit 2fa6541 into main Nov 25, 2024
10 of 11 checks passed

renovate bot deleted the renovate/react-router-monorepo branch November 25, 2024 07:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(deps): update react-router monorepo #944

chore(deps): update react-router monorepo #944

renovate bot commented Nov 25, 2024

chore(deps): update react-router monorepo #944

chore(deps): update react-router monorepo #944

Conversation

renovate bot commented Nov 25, 2024

Release Notes

Patch Changes

Major Changes

Minor Changes

Typesafety improvements (#​12019)

Patch Changes

Patch Changes

Major Changes

Patch Changes

Patch Changes

Major Changes

Patch Changes

Major Changes

Minor Changes

Typesafety improvements (#​12019)

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Configuration

Typesafety improvements (#12019)

Typesafety improvements (#12019)