Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Nov 25, 2024
Merged

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

merged 1 commit into from
Nov 25, 2024

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Nov 25, 2024

This PR contains the following updates:

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

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:
    • react-router@7.0.1
    • @react-router/node@7.0.1
    • @react-router/serve@7.0.1

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 "@​remix/dev";

+import { reactRouter } from "@​react-router/dev/vite";
+import { cloudflareDevProxy } from "@​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 "@​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:

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:
    • react-router@7.0.0
    • @react-router/serve@7.0.0
    • @react-router/node@7.0.0

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

v7.0.1

Compare Source

Patch Changes
  • Updated dependencies:
    • react-router@7.0.1

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

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:
    • react-router@7.0.1
    • @react-router/express@7.0.1
    • @react-router/node@7.0.1

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:

    • react-router@7.0.0
    • @react-router/express@7.0.0
    • @react-router/node@7.0.0

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:

  • Stabilize unstable_dataStrategy (#​11969)

  • Stabilize unstable_patchRoutesOnNavigation (#​11970)

Patch Changes

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:
    • react-router@6.28.0
    • @remix-run/router@1.21.0

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/router@1.19.0
    • react-router@6.26.0

v6.25.1

Compare Source

Patch Changes
  • Memoize some RouterProvider internals to reduce unnecessary re-renders (#​11803)
  • Updated dependencies:
    • react-router@6.25.1

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:
    • react-router@6.25.0
    • @remix-run/router@1.18.0

v6.24.1

Compare Source

Patch Changes

v6.24.0

Compare Source

Minor Changes
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:
    • react-router@6.24.0
    • @remix-run/router@1.17.0

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/router@1.16.1
    • react-router@6.23.1

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/router@1.16.0
    • react-router@6.23.0

v6.22.3

Compare Source

Patch Changes
  • Updated dependencies:
    • @remix-run/router@1.15.3
    • react-router@6.22.3

v6.22.2

Compare Source

Patch Changes
  • Updated dependencies:
    • @remix-run/router@1.15.2
    • react-router@6.22.2

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/router@1.15.0
    • react-router@6.22.0

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:
    • react-router@6.21.3

v6.21.2

Compare Source

v6.21.1

Compare Source

Patch Changes
  • Updated dependencies:
    • react-router@6.21.1
    • @remix-run/router@1.14.1

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/router@1.14.0
    • react-router@6.21.0

v6.20.1

Compare Source

Patch Changes

v6.20.0

Compare Source

Minor Changes
  • Export the PathParam type from the public API (#​10719)
Patch Changes
  • Updated dependencies:
    • react-router@6.20.0
    • @remix-run/router@1.13.0

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.

@renovate renovate bot enabled auto-merge November 25, 2024 07:13
@renovate renovate bot merged commit 2fa6541 into main Nov 25, 2024
10 of 11 checks passed
@renovate renovate bot deleted the renovate/react-router-monorepo branch November 25, 2024 07:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@renovate-approve renovate-approve[bot] renovate-approve[bot] approved these changes

Assignees
No one assigned
Labels
dependencies
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
0 participants