Patch in 6.26.1 changes from v6 branch

Author: brophdawg11

CHANGELOG.md

@@ -203,6 +203,18 @@ Date: YYYY-MM-DD
 **Full Changelog**: [`v6.X.Y...v6.X.Y`](https://github.com/remix-run/react-router/compare/[email protected]@6.X.Y)
 -->
 
+## v6.26.1
+
+Date: 2024-08-15
+
+### Patch Changes
+
+- Rename `unstable_patchRoutesOnMiss` to `unstable_patchRoutesOnNavigation` to match new behavior ([#11888](https://github.com/remix-run/react-router/pull/11888))
+- Update `unstable_patchRoutesOnNavigation` logic so that we call the method when we match routes with dynamic param or splat segments in case there exists a higher-scoring static route that we've not yet discovered ([#11883](https://github.com/remix-run/react-router/pull/11883))
+  - We also now leverage an internal FIFO queue of previous paths we've already called `unstable_patchRoutesOnNavigation` against so that we don't re-call on subsequent navigations to the same path
+
+**Full Changelog**: [`v6.26.0...v6.26.1`](https://github.com/remix-run/react-router/compare/[email protected]@6.26.1)
+
 ## v6.26.0
 
 Date: 2024-08-01

docs/routers/create-browser-router.md

@@ -52,7 +52,7 @@ function createBrowserRouter(
     future?: FutureConfig;
     hydrationData?: HydrationState;
     unstable_dataStrategy?: unstable_DataStrategyFunction;
-    unstable_patchRoutesOnMiss?: unstable_PatchRoutesOnMissFunction;
+    unstable_patchRoutesOnNavigation?: unstable_PatchRoutesOnNavigationFunction;
     window?: Window;
   }
 ): RemixRouter;
@@ -384,7 +384,7 @@ let router = createBrowserRouter(routes, {
 });
 ```
 
-## `opts.unstable_patchRoutesOnMiss`
+## `opts.unstable_patchRoutesOnNavigation`
 
 <docs-warning>This API is marked "unstable" so it is subject to breaking API changes in minor releases</docs-warning>
 
@@ -394,12 +394,12 @@ To combat this, we introduced [`route.lazy`][route-lazy] in [v6.9.0][6-9-0] whic
 
 In some cases, even this doesn't go far enough. For very large applications, providing all route definitions up front can be prohibitively expensive. Additionally, it might not even be possible to provide all route definitions up front in certain Micro-Frontend or Module-Federation architectures.
 
-This is where `unstable_patchRoutesOnMiss` comes in ([RFC][fog-of-war-rfc]). This API is for advanced use-cases where you are unable to provide the full route tree up-front and need a way to lazily "discover" portions of the route tree at runtime. This feature is often referred to as ["Fog of War"][fog-of-war] because similar to how video games expand the "world" as you move around - the router would be expanding its routing tree as the user navigated around the app - but would only ever end up loading portions of the tree that the user visited.
+This is where `unstable_patchRoutesOnNavigation` comes in ([RFC][fog-of-war-rfc]). This API is for advanced use-cases where you are unable to provide the full route tree up-front and need a way to lazily "discover" portions of the route tree at runtime. This feature is often referred to as ["Fog of War"][fog-of-war] because similar to how video games expand the "world" as you move around - the router would be expanding its routing tree as the user navigated around the app - but would only ever end up loading portions of the tree that the user visited.
 
 ### Type Declaration
 
 ```ts
-export interface unstable_PatchRoutesOnMissFunction {
+export interface unstable_PatchRoutesOnNavigationFunction {
   (opts: {
     path: string;
     matches: RouteMatch[];
@@ -413,7 +413,7 @@ export interface unstable_PatchRoutesOnMissFunction {
 
 ### Overview
 
-`unstable_patchRoutesOnMiss` will be called anytime React Router is unable to match a `path`. The arguments include the `path`, any partial `matches`, and a `patch` function you can call to patch new routes into the tree at a specific location. This method is executed during the `loading` portion of the navigation for `GET` requests and during the `submitting` portion of the navigation for non-`GET` requests.
+`unstable_patchRoutesOnNavigation` will be called anytime React Router is unable to match a `path`. The arguments include the `path`, any partial `matches`, and a `patch` function you can call to patch new routes into the tree at a specific location. This method is executed during the `loading` portion of the navigation for `GET` requests and during the `submitting` portion of the navigation for non-`GET` requests.
 
 **Patching children into an existing route**
 
@@ -427,7 +427,10 @@ const router = createBrowserRouter(
     },
   ],
   {
-    async unstable_patchRoutesOnMiss({ path, patch }) {
+    async unstable_patchRoutesOnNavigation({
+      path,
+      patch,
+    }) {
       if (path === "/a") {
         // Load/patch the `a` route as a child of the route with id `root`
         let route = await getARoute();
@@ -439,7 +442,7 @@ const router = createBrowserRouter(
 );
 ```
 
-In the above example, if the user clicks a link to `/a`, React Router won't be able to match it initially and will call `patchRoutesOnMiss` with `/a` and a `matches` array containing the root route match. By calling `patch`, the `a` route will be added to the route tree and React Router will perform matching again. This time it will successfully match the `/a` path and the navigation will complete successfully.
+In the above example, if the user clicks a link to `/a`, React Router won't be able to match it initially and will call `patchRoutesOnNavigation` with `/a` and a `matches` array containing the root route match. By calling `patch`, the `a` route will be added to the route tree and React Router will perform matching again. This time it will successfully match the `/a` path and the navigation will complete successfully.
 
 **Patching new root-level routes**
 
@@ -455,7 +458,10 @@ const router = createBrowserRouter(
     },
   ],
   {
-    async unstable_patchRoutesOnMiss({ path, patch }) {
+    async unstable_patchRoutesOnNavigation({
+      path,
+      patch,
+    }) {
       if (path === "/root-sibling") {
         // Load/patch the `/root-sibling` route as a sibling of the root route
         let route = await getRootSiblingRoute();
@@ -480,7 +486,10 @@ let router = createBrowserRouter(
     },
   ],
   {
-    async unstable_patchRoutesOnMiss({ path, patch }) {
+    async unstable_patchRoutesOnNavigation({
+      path,
+      patch,
+    }) {
       if (path.startsWith("/dashboard")) {
         let children = await import("./dashboard");
         patch(null, children);
@@ -510,7 +519,7 @@ let router = createBrowserRouter(
       children: [
         {
           // If we want to include /dashboard in the critical routes, we need to
-          // also include it's index route since patchRoutesOnMiss will not be
+          // also include it's index route since patchRoutesOnNavigation will not be
           // called on a navigation to `/dashboard` because it will have successfully
           // matched the `/dashboard` parent route
           index: true,
@@ -535,7 +544,10 @@ let router = createBrowserRouter(
     },
   ],
   {
-    async unstable_patchRoutesOnMiss({ matches, patch }) {
+    async unstable_patchRoutesOnNavigation({
+      matches,
+      patch,
+    }) {
       let leafRoute = matches[matches.length - 1]?.route;
       if (leafRoute?.handle?.lazyChildren) {
         let children =

docs/start/tutorial.md

@@ -1364,7 +1364,7 @@ If we review the search form, it looks like this:
 </form>
 ```
 
-As we've seen before, browsers can serialize forms by the `name` attribute of its input elements. The name of this input is `q`, that's why the URL has `?q=`. If we named it `search` the URL would be `?search=`.
+As we've seen before, browsers can serialize forms by the `name` attribute of it's input elements. The name of this input is `q`, that's why the URL has `?q=`. If we named it `search` the URL would be `?search=`.
 
 Note that this form is different from the others we've used, it does not have `<form method="post">`. The default `method` is `"get"`. That means when the browser creates the request for the next document, it doesn't put the form data into the request POST body, but into the [`URLSearchParams`][urlsearchparams] of a GET request.
 

package.json

@@ -117,7 +117,7 @@
       "none": "17.3 kB"
     },
     "packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
-      "none": "23.7 kB"
+      "none": "23.8 kB"
     }
   },
   "pnpm": {

packages/react-router-dom-v5-compat/CHANGELOG.md

@@ -1,5 +1,14 @@
 # `react-router-dom-v5-compat`
 
+## 6.26.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - `@remix-run/[email protected]`
+  - `[email protected]`
+  - `[email protected]`
+
 ## 6.26.0
 
 ### Patch Changes

packages/react-router-dom-v5-compat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.26.0",
+  "version": "6.26.1",
   "description": "Migration path to React Router v6 from v4/5",
   "keywords": [
     "react",

packages/react-router-dom/CHANGELOG.md

@@ -1,5 +1,14 @@
 # `react-router-dom`
 
+## 6.26.1
+
+### Patch Changes
+
+- Rename `unstable_patchRoutesOnMiss` to `unstable_patchRoutesOnNavigation` to match new behavior ([#11888](https://github.com/remix-run/react-router/pull/11888))
+- Updated dependencies:
+  - `@remix-run/[email protected]`
+  - `[email protected]`
+
 ## 6.26.0
 
 ### Minor Changes

packages/react-router-dom/__tests__/partial-hydration-test.tsx

@@ -31,7 +31,7 @@ describe("v7_partialHydration", () => {
     testPartialHydration(createMemoryRouter, ReactRouter_RouterProvider);
 
     // these tests only run for memory since we just need to set initialEntries
-    it("supports partial hydration w/patchRoutesOnMiss (leaf fallback)", async () => {
+    it("supports partial hydration w/patchRoutesOnNavigation (leaf fallback)", async () => {
       let parentDfd = createDeferred();
       let childDfd = createDeferred();
       let router = createMemoryRouter(
@@ -69,7 +69,7 @@ describe("v7_partialHydration", () => {
           future: {
             v7_partialHydration: true,
           },
-          unstable_patchRoutesOnMiss({ path, patch }) {
+          unstable_patchRoutesOnNavigation({ path, patch }) {
             if (path === "/parent/child") {
               patch("parent", [
                 {
@@ -119,7 +119,7 @@ describe("v7_partialHydration", () => {
       `);
     });
 
-    it("supports partial hydration w/patchRoutesOnMiss (root fallback)", async () => {
+    it("supports partial hydration w/patchRoutesOnNavigation (root fallback)", async () => {
       let parentDfd = createDeferred();
       let childDfd = createDeferred();
       let router = createMemoryRouter(
@@ -157,7 +157,7 @@ describe("v7_partialHydration", () => {
           future: {
             v7_partialHydration: true,
           },
-          unstable_patchRoutesOnMiss({ path, patch }) {
+          unstable_patchRoutesOnNavigation({ path, patch }) {
             if (path === "/parent/child") {
               patch("parent", [
                 {

packages/react-router-dom/index.tsx

@@ -16,7 +16,7 @@ import type {
   RouterProps,
   RouterProviderProps,
   To,
-  unstable_PatchRoutesOnMissFunction,
+  unstable_PatchRoutesOnNavigationFunction,
 } from "react-router";
 import {
   Router,
@@ -153,7 +153,7 @@ export type {
   To,
   UIMatch,
   unstable_HandlerResult,
-  unstable_PatchRoutesOnMissFunction,
+  unstable_PatchRoutesOnNavigationFunction,
 } from "react-router";
 export {
   AbortedDeferredError,
@@ -261,7 +261,7 @@ interface DOMRouterOpts {
   future?: Partial<Omit<RouterFutureConfig, "v7_prependBasename">>;
   hydrationData?: HydrationState;
   unstable_dataStrategy?: unstable_DataStrategyFunction;
-  unstable_patchRoutesOnMiss?: unstable_PatchRoutesOnMissFunction;
+  unstable_patchRoutesOnNavigation?: unstable_PatchRoutesOnNavigationFunction;
   window?: Window;
 }
 
@@ -280,7 +280,7 @@ export function createBrowserRouter(
     routes,
     mapRouteProperties,
     unstable_dataStrategy: opts?.unstable_dataStrategy,
-    unstable_patchRoutesOnMiss: opts?.unstable_patchRoutesOnMiss,
+    unstable_patchRoutesOnNavigation: opts?.unstable_patchRoutesOnNavigation,
     window: opts?.window,
   }).initialize();
 }
@@ -300,7 +300,7 @@ export function createHashRouter(
     routes,
     mapRouteProperties,
     unstable_dataStrategy: opts?.unstable_dataStrategy,
-    unstable_patchRoutesOnMiss: opts?.unstable_patchRoutesOnMiss,
+    unstable_patchRoutesOnNavigation: opts?.unstable_patchRoutesOnNavigation,
     window: opts?.window,
   }).initialize();
 }

packages/react-router-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom",
-  "version": "6.26.0",
+  "version": "6.26.1",
   "description": "Declarative routing for React web applications",
   "keywords": [
     "react",