react-router 8.1.0 → 8.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/development/dom-export.js +1 -1
- package/dist/development/index-react-server-client.js +1 -1
- package/dist/development/index-react-server.d.ts +3 -2
- package/dist/development/index-react-server.js +11 -6
- package/dist/development/index.js +1 -1
- package/dist/development/lib/actions.js +1 -1
- package/dist/development/lib/components.js +1 -1
- package/dist/development/lib/context.js +1 -1
- package/dist/development/lib/dom/dom.js +1 -1
- package/dist/development/lib/dom/lib.js +2 -2
- package/dist/development/lib/dom/server.js +1 -1
- package/dist/development/lib/dom/ssr/components.js +1 -1
- package/dist/development/lib/dom/ssr/data.js +1 -1
- package/dist/development/lib/dom/ssr/errorBoundaries.js +1 -1
- package/dist/development/lib/dom/ssr/fallback.js +1 -1
- package/dist/development/lib/dom/ssr/fog-of-war.js +1 -1
- package/dist/development/lib/dom/ssr/hydration.js +1 -1
- package/dist/development/lib/dom/ssr/invariant.js +1 -1
- package/dist/development/lib/dom/ssr/links.js +1 -1
- package/dist/development/lib/dom/ssr/markup.js +1 -1
- package/dist/development/lib/dom/ssr/routeModules.js +1 -1
- package/dist/development/lib/dom/ssr/routes-test-stub.js +1 -1
- package/dist/development/lib/dom/ssr/routes.js +1 -1
- package/dist/development/lib/dom/ssr/server.js +1 -1
- package/dist/development/lib/dom/ssr/single-fetch.js +1 -1
- package/dist/development/lib/dom-export/dom-router-provider.js +1 -1
- package/dist/development/lib/dom-export/hydrated-router.js +1 -1
- package/dist/development/lib/errors.js +1 -1
- package/dist/development/lib/hooks.d.ts +33 -6
- package/dist/development/lib/hooks.js +34 -7
- package/dist/development/lib/href.js +6 -3
- package/dist/development/lib/router/history.js +1 -1
- package/dist/development/lib/router/instrumentation.js +1 -1
- package/dist/development/lib/router/router.js +2 -2
- package/dist/development/lib/router/url.js +1 -1
- package/dist/development/lib/router/utils.js +5 -3
- package/dist/development/lib/rsc/browser.js +1 -1
- package/dist/development/lib/rsc/errorBoundaries.js +1 -1
- package/dist/development/lib/rsc/html-stream/browser.js +1 -1
- package/dist/development/lib/rsc/html-stream/server.js +1 -1
- package/dist/development/lib/rsc/route-modules.js +1 -1
- package/dist/development/lib/rsc/server.rsc.d.ts +3 -2
- package/dist/development/lib/rsc/server.ssr.js +1 -1
- package/dist/development/lib/server-runtime/cookies.js +1 -1
- package/dist/development/lib/server-runtime/crypto.js +1 -1
- package/dist/development/lib/server-runtime/data.js +1 -1
- package/dist/development/lib/server-runtime/dev.js +1 -1
- package/dist/development/lib/server-runtime/entry.js +1 -1
- package/dist/development/lib/server-runtime/errors.js +1 -1
- package/dist/development/lib/server-runtime/headers.js +1 -1
- package/dist/development/lib/server-runtime/invariant.js +1 -1
- package/dist/development/lib/server-runtime/mode.js +1 -1
- package/dist/development/lib/server-runtime/routeMatching.js +1 -1
- package/dist/development/lib/server-runtime/routes.js +1 -1
- package/dist/development/lib/server-runtime/server.js +1 -1
- package/dist/development/lib/server-runtime/serverHandoff.js +1 -1
- package/dist/development/lib/server-runtime/sessions/cookieStorage.js +1 -1
- package/dist/development/lib/server-runtime/sessions/memoryStorage.js +1 -1
- package/dist/development/lib/server-runtime/sessions.js +1 -1
- package/dist/development/lib/server-runtime/single-fetch.js +1 -1
- package/dist/development/lib/server-runtime/urls.js +1 -1
- package/dist/development/lib/server-runtime/warnings.js +1 -1
- package/dist/development/lib/types/internal.js +1 -1
- package/dist/development/vendor/turbo-stream-v2/flatten.js +1 -1
- package/dist/development/vendor/turbo-stream-v2/turbo-stream.js +1 -1
- package/dist/development/vendor/turbo-stream-v2/unflatten.js +1 -1
- package/dist/development/vendor/turbo-stream-v2/utils.js +1 -1
- package/dist/production/dom-export.js +1 -1
- package/dist/production/index-react-server-client.js +1 -1
- package/dist/production/index-react-server.d.ts +3 -2
- package/dist/production/index-react-server.js +11 -6
- package/dist/production/index.js +1 -1
- package/dist/production/lib/actions.js +1 -1
- package/dist/production/lib/components.js +1 -1
- package/dist/production/lib/context.js +1 -1
- package/dist/production/lib/dom/dom.js +1 -1
- package/dist/production/lib/dom/lib.js +2 -2
- package/dist/production/lib/dom/server.js +1 -1
- package/dist/production/lib/dom/ssr/components.js +1 -1
- package/dist/production/lib/dom/ssr/data.js +1 -1
- package/dist/production/lib/dom/ssr/errorBoundaries.js +1 -1
- package/dist/production/lib/dom/ssr/fallback.js +1 -1
- package/dist/production/lib/dom/ssr/fog-of-war.js +1 -1
- package/dist/production/lib/dom/ssr/hydration.js +1 -1
- package/dist/production/lib/dom/ssr/invariant.js +1 -1
- package/dist/production/lib/dom/ssr/links.js +1 -1
- package/dist/production/lib/dom/ssr/markup.js +1 -1
- package/dist/production/lib/dom/ssr/routeModules.js +1 -1
- package/dist/production/lib/dom/ssr/routes-test-stub.js +1 -1
- package/dist/production/lib/dom/ssr/routes.js +1 -1
- package/dist/production/lib/dom/ssr/server.js +1 -1
- package/dist/production/lib/dom/ssr/single-fetch.js +1 -1
- package/dist/production/lib/dom-export/dom-router-provider.js +1 -1
- package/dist/production/lib/dom-export/hydrated-router.js +1 -1
- package/dist/production/lib/errors.js +1 -1
- package/dist/production/lib/hooks.d.ts +33 -6
- package/dist/production/lib/hooks.js +34 -7
- package/dist/production/lib/href.js +6 -3
- package/dist/production/lib/router/history.js +1 -1
- package/dist/production/lib/router/instrumentation.js +1 -1
- package/dist/production/lib/router/router.js +2 -2
- package/dist/production/lib/router/url.js +1 -1
- package/dist/production/lib/router/utils.js +5 -3
- package/dist/production/lib/rsc/browser.js +1 -1
- package/dist/production/lib/rsc/errorBoundaries.js +1 -1
- package/dist/production/lib/rsc/html-stream/browser.js +1 -1
- package/dist/production/lib/rsc/html-stream/server.js +1 -1
- package/dist/production/lib/rsc/route-modules.js +1 -1
- package/dist/production/lib/rsc/server.rsc.d.ts +3 -2
- package/dist/production/lib/rsc/server.ssr.js +1 -1
- package/dist/production/lib/server-runtime/cookies.js +1 -1
- package/dist/production/lib/server-runtime/crypto.js +1 -1
- package/dist/production/lib/server-runtime/data.js +1 -1
- package/dist/production/lib/server-runtime/dev.js +1 -1
- package/dist/production/lib/server-runtime/entry.js +1 -1
- package/dist/production/lib/server-runtime/errors.js +1 -1
- package/dist/production/lib/server-runtime/headers.js +1 -1
- package/dist/production/lib/server-runtime/invariant.js +1 -1
- package/dist/production/lib/server-runtime/mode.js +1 -1
- package/dist/production/lib/server-runtime/routeMatching.js +1 -1
- package/dist/production/lib/server-runtime/routes.js +1 -1
- package/dist/production/lib/server-runtime/server.js +1 -1
- package/dist/production/lib/server-runtime/serverHandoff.js +1 -1
- package/dist/production/lib/server-runtime/sessions/cookieStorage.js +1 -1
- package/dist/production/lib/server-runtime/sessions/memoryStorage.js +1 -1
- package/dist/production/lib/server-runtime/sessions.js +1 -1
- package/dist/production/lib/server-runtime/single-fetch.js +1 -1
- package/dist/production/lib/server-runtime/urls.js +1 -1
- package/dist/production/lib/server-runtime/warnings.js +1 -1
- package/dist/production/lib/types/internal.js +1 -1
- package/dist/production/vendor/turbo-stream-v2/flatten.js +1 -1
- package/dist/production/vendor/turbo-stream-v2/turbo-stream.js +1 -1
- package/dist/production/vendor/turbo-stream-v2/unflatten.js +1 -1
- package/dist/production/vendor/turbo-stream-v2/utils.js +1 -1
- package/docs/explanation/hot-module-replacement.md +1 -1
- package/docs/how-to/data-strategy.md +1 -1
- package/docs/start/framework/deploying.md +4 -0
- package/docs/upgrading/component-routes.md +1 -1
- package/docs/upgrading/future.md +33 -0
- package/docs/upgrading/router-provider.md +5 -5
- package/docs/upgrading/v7.md +39 -22
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* react-router v8.
|
|
2
|
+
* react-router v8.2.0
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Remix Software Inc.
|
|
5
5
|
*
|
|
@@ -341,7 +341,7 @@ function createRouter(init) {
|
|
|
341
341
|
else actionData = null;
|
|
342
342
|
let loaderData = newState.loaderData ? mergeLoaderData(state.loaderData, newState.loaderData, newState.matches || [], newState.errors) : state.loaderData;
|
|
343
343
|
let blockers = state.blockers;
|
|
344
|
-
if (blockers.size > 0) {
|
|
344
|
+
if (blockers.size > 0 && !isUninterruptedRevalidation) {
|
|
345
345
|
blockers = new Map(blockers);
|
|
346
346
|
blockers.forEach((_, k) => blockers.set(k, IDLE_BLOCKER));
|
|
347
347
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* react-router v8.
|
|
2
|
+
* react-router v8.2.0
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Remix Software Inc.
|
|
5
5
|
*
|
|
@@ -314,6 +314,8 @@ function rankRouteBranches(branches) {
|
|
|
314
314
|
branches.sort((a, b) => a.score !== b.score ? b.score - a.score : compareIndexes(a.routesMeta.map((meta) => meta.childrenIndex), b.routesMeta.map((meta) => meta.childrenIndex)));
|
|
315
315
|
}
|
|
316
316
|
const paramRe = /^:[\w-]+$/;
|
|
317
|
+
const partialParamRe = /^:[\w-]+/;
|
|
318
|
+
const partialDynamicSegmentValue = 3.5;
|
|
317
319
|
const dynamicSegmentValue = 3;
|
|
318
320
|
const indexRouteValue = 2;
|
|
319
321
|
const emptySegmentValue = 1;
|
|
@@ -325,7 +327,7 @@ function computeScore(path, index) {
|
|
|
325
327
|
let initialScore = segments.length;
|
|
326
328
|
if (segments.some(isSplat)) initialScore += splatPenalty;
|
|
327
329
|
if (index) initialScore += indexRouteValue;
|
|
328
|
-
return segments.filter((s) => !isSplat(s)).reduce((score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue), initialScore);
|
|
330
|
+
return segments.filter((s) => !isSplat(s)).reduce((score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : partialParamRe.test(segment) ? partialDynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue), initialScore);
|
|
329
331
|
}
|
|
330
332
|
function compareIndexes(a, b) {
|
|
331
333
|
return a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]) ? a[a.length - 1] - b[b.length - 1] : 0;
|
|
@@ -456,7 +458,7 @@ function compilePath(path, caseSensitive = false, end = true) {
|
|
|
456
458
|
return "(?:/([^\\/]*))?";
|
|
457
459
|
}
|
|
458
460
|
return "/([^\\/]+)";
|
|
459
|
-
}).replace(/\/([\w-]+)\?(
|
|
461
|
+
}).replace(/\/([\w-]+)\?(?=\/|$|\()/g, "(?:/$1)?");
|
|
460
462
|
if (path.endsWith("*")) {
|
|
461
463
|
params.push({ paramName: "*" });
|
|
462
464
|
regexpSource += path === "*" || path === "/*" ? "(.*)$" : "(?:\\/(.+)|\\/*)$";
|
|
@@ -3,6 +3,7 @@ import { Location } from "../router/history.js";
|
|
|
3
3
|
import { ActionFunction, LoaderFunction, Params, RouterContextProvider, ShouldRevalidateFunction } from "../router/utils.js";
|
|
4
4
|
import { ClientActionFunction, ClientLoaderFunction, HeadersFunction, LinksFunction, MetaFunction } from "../dom/ssr/routeModules.js";
|
|
5
5
|
import * as React$1 from "react";
|
|
6
|
+
import { ReactFormState } from "react-dom/client";
|
|
6
7
|
|
|
7
8
|
//#region lib/rsc/server.rsc.d.ts
|
|
8
9
|
declare function getRequest(): Request;
|
|
@@ -71,7 +72,7 @@ type RSCRenderPayload = {
|
|
|
71
72
|
matches: RSCRouteMatch[];
|
|
72
73
|
patches?: Promise<RSCRouteManifest[]>;
|
|
73
74
|
nonce?: string;
|
|
74
|
-
formState?:
|
|
75
|
+
formState?: ReactFormState;
|
|
75
76
|
};
|
|
76
77
|
type RSCManifestPayload = {
|
|
77
78
|
type: "manifest";
|
|
@@ -97,7 +98,7 @@ type RSCMatch = {
|
|
|
97
98
|
payload: RSCPayload;
|
|
98
99
|
};
|
|
99
100
|
type DecodeActionFunction = (formData: FormData) => Promise<() => Promise<unknown>>;
|
|
100
|
-
type DecodeFormStateFunction = (result: unknown, formData: FormData) =>
|
|
101
|
+
type DecodeFormStateFunction = (result: unknown, formData: FormData) => Promise<ReactFormState | undefined>;
|
|
101
102
|
type DecodeReplyFunction = (reply: FormData | string, options: {
|
|
102
103
|
temporaryReferences: unknown;
|
|
103
104
|
}) => Promise<unknown[]>;
|
|
@@ -111,7 +111,7 @@ export default function Component({ loaderData }) {
|
|
|
111
111
|
|
|
112
112
|
If you change the key `pet` to `dog`:
|
|
113
113
|
|
|
114
|
-
```diff
|
|
114
|
+
```tsx diff
|
|
115
115
|
export default function Component() {
|
|
116
116
|
- const { pet } = useMyCustomHook();
|
|
117
117
|
+ const { dog } = useMyCustomHook();
|
|
@@ -166,7 +166,7 @@ With `shouldCallHandler`, you are in charge of which handlers should be called s
|
|
|
166
166
|
|
|
167
167
|
Here's an example change from the prior API to the new API. Note that we pre-filter the `matchesToLoad` before calling `resolve()`:
|
|
168
168
|
|
|
169
|
-
```diff
|
|
169
|
+
```tsx diff
|
|
170
170
|
let results = {};
|
|
171
171
|
+let matchesToLoad = matches.filter(m => m.shouldCallHandler());
|
|
172
172
|
await Promise.all(() =>
|
|
@@ -98,3 +98,7 @@ EdgeOne Pages maintains their own template for React Router. Checkout the [EdgeO
|
|
|
98
98
|
### DeployHQ
|
|
99
99
|
|
|
100
100
|
DeployHQ maintains their own guide for deploying React Router to your own server. Checkout the [DeployHQ Guide](https://www.deployhq.com/guides/deploy-react-router-from-github) for more information.
|
|
101
|
+
|
|
102
|
+
### Hostinger
|
|
103
|
+
|
|
104
|
+
Hostinger supports deploying React Router applications with server rendering on its managed Node.js hosting, including automatic deployments from GitHub. Checkout the [Hostinger Guide](https://www.hostinger.com/web-apps-hosting/react-router-hosting) for more information.
|
|
@@ -49,7 +49,7 @@ npm install @react-router/node
|
|
|
49
49
|
|
|
50
50
|
**👉 Swap out the React plugin for React Router.**
|
|
51
51
|
|
|
52
|
-
```diff filename=vite.config.ts
|
|
52
|
+
```tsx diff filename=vite.config.ts
|
|
53
53
|
-import react from '@vitejs/plugin-react'
|
|
54
54
|
+import { reactRouter } from "@react-router/dev/vite";
|
|
55
55
|
import { defineConfig } from "vite";
|
package/docs/upgrading/future.md
CHANGED
|
@@ -46,6 +46,39 @@ _No known planned breaking changes yet_
|
|
|
46
46
|
|
|
47
47
|
We document some [unstable] flags here as a reference for folks contributing to the project via beta testing, but they are not generally recommended for production use and may have breaking changes in patch or minor releases - adopt with caution!
|
|
48
48
|
|
|
49
|
+
### `future.unstable_enableNodeReadableStream`
|
|
50
|
+
|
|
51
|
+
[MODES: framework]
|
|
52
|
+
|
|
53
|
+
<br/>
|
|
54
|
+
<br/>
|
|
55
|
+
|
|
56
|
+
**Background**
|
|
57
|
+
|
|
58
|
+
Now that the Web Streams API is [stable](https://nodejs.org/docs/latest-v22.x/api/webstreams.html) in Node 22+, it's viable for React Router to use React's [`renderToReadableStream`](https://react.dev/reference/react-dom/server/renderToReadableStream) in the server entry.
|
|
59
|
+
|
|
60
|
+
When no `entry.server.tsx` file is present, React Router defaults to [`renderToPipeableStream`](https://react.dev/reference/react-dom/server/renderToPipeableStream) when a Node runtime is detected, and `renderToReadableStream` otherwise.
|
|
61
|
+
|
|
62
|
+
With this flag enabled, React Router will default to `renderToReadableStream` on all runtimes, including Node. You can continue to use `renderToPipeableStream` via a custom `entry.server.tsx` file if needed.
|
|
63
|
+
|
|
64
|
+
<docs-info>Enabling this flag might even provide slight performance gains because we are already using Web Streams internally, so this flag removes some unnecessary transforms between Web and Node streams.</docs-info>
|
|
65
|
+
|
|
66
|
+
👉 **Enable the Flag**
|
|
67
|
+
|
|
68
|
+
```ts filename=react-router.config.ts
|
|
69
|
+
import type { Config } from "@react-router/dev/config";
|
|
70
|
+
|
|
71
|
+
export default {
|
|
72
|
+
future: {
|
|
73
|
+
unstable_enableNodeReadableStream: true,
|
|
74
|
+
},
|
|
75
|
+
} satisfies Config;
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
**Update your Code**
|
|
79
|
+
|
|
80
|
+
No code changes are required. If your app has a custom `entry.server.tsx`, this flag will not change your runtime behavior.
|
|
81
|
+
|
|
49
82
|
### `future.unstable_optimizeDeps`
|
|
50
83
|
|
|
51
84
|
[MODES: framework]
|
|
@@ -85,7 +85,7 @@ Instead of importing your route modules directly, lazy load and convert them to
|
|
|
85
85
|
|
|
86
86
|
Not only does your route definition now conform to the Route Module API, but you also get the benefits of code-splitting your routes.
|
|
87
87
|
|
|
88
|
-
```diff filename=src/main.tsx
|
|
88
|
+
```tsx diff filename=src/main.tsx
|
|
89
89
|
let router = createBrowserRouter([
|
|
90
90
|
// ... other routes
|
|
91
91
|
{
|
|
@@ -120,7 +120,7 @@ npm install @react-router/node
|
|
|
120
120
|
|
|
121
121
|
**👉 Swap out the React plugin for React Router**
|
|
122
122
|
|
|
123
|
-
```diff filename=vite.config.ts
|
|
123
|
+
```tsx diff filename=vite.config.ts
|
|
124
124
|
-import react from '@vitejs/plugin-react'
|
|
125
125
|
+import { reactRouter } from "@react-router/dev/vite";
|
|
126
126
|
import { defineConfig } from "vite";
|
|
@@ -247,7 +247,7 @@ export default function App() {
|
|
|
247
247
|
|
|
248
248
|
You would move everything above the `RouterProvider` into `root.tsx`.
|
|
249
249
|
|
|
250
|
-
```diff filename=src/root.tsx
|
|
250
|
+
```tsx diff filename=src/root.tsx
|
|
251
251
|
+import "./index.css";
|
|
252
252
|
|
|
253
253
|
// ... other imports and Layout
|
|
@@ -326,7 +326,7 @@ touch src/routes.ts src/catchall.tsx
|
|
|
326
326
|
|
|
327
327
|
Move your route definitions to `routes.ts`. Note that the schemas don't match exactly, so you will get type errors; we'll fix this next.
|
|
328
328
|
|
|
329
|
-
```diff filename=src/routes.ts
|
|
329
|
+
```tsx diff filename=src/routes.ts
|
|
330
330
|
+import type { RouteConfig } from "@react-router/dev/routes";
|
|
331
331
|
|
|
332
332
|
-const router = createBrowserRouter([
|
|
@@ -362,7 +362,7 @@ Move your route definitions to `routes.ts`. Note that the schemas don't match ex
|
|
|
362
362
|
|
|
363
363
|
**👉 Replace the `lazy` loader with a `file` loader**
|
|
364
364
|
|
|
365
|
-
```diff filename=src/routes.ts
|
|
365
|
+
```tsx diff filename=src/routes.ts
|
|
366
366
|
export default [
|
|
367
367
|
{
|
|
368
368
|
path: "/",
|
package/docs/upgrading/v7.md
CHANGED
|
@@ -5,7 +5,7 @@ order: 2
|
|
|
5
5
|
|
|
6
6
|
# Upgrading from v7
|
|
7
7
|
|
|
8
|
-
We try our best to keep major version upgrades simple and boring through the use of opt-in APIs and [Future Flags][api-development-strategy]. Future flags are used to gate breaking changes that don't otherwise have a good call-site opt-in strategy. By adopting all opt-in APIs and future flags, you should be able to
|
|
8
|
+
We try our best to keep major version upgrades simple and boring through the use of opt-in APIs and [Future Flags][api-development-strategy]. Future flags are used to gate breaking changes that don't otherwise have a good call-site opt-in strategy. By adopting all opt-in APIs and future flags while still on v7, you should be able to update to React Router v8 with minimal changes.
|
|
9
9
|
|
|
10
10
|
We highly recommend you make a commit after each step and ship it instead of doing everything all at once. Most flags can be adopted in any order, with exceptions noted below.
|
|
11
11
|
|
|
@@ -16,19 +16,19 @@ We highly recommend you make a commit after each step and ship it instead of doi
|
|
|
16
16
|
<br/>
|
|
17
17
|
<br/>
|
|
18
18
|
|
|
19
|
-
React Router v8 requires the following minimum versions.
|
|
19
|
+
React Router v8 requires the following minimum versions. Update them before updating React Router to v8:
|
|
20
20
|
|
|
21
21
|
- `node@22.22+`
|
|
22
22
|
- `react@19.2.7+`/`react-dom@19.2.7+`
|
|
23
23
|
|
|
24
|
-
Framework mode
|
|
24
|
+
Framework mode also requires:
|
|
25
25
|
|
|
26
26
|
- `vite@7+` (requires `future.v8_viteEnvironmentApi`)
|
|
27
27
|
- also make sure any custom Vite plugins or config are compatible with Vite 7
|
|
28
28
|
|
|
29
29
|
## Update to latest v7.x
|
|
30
30
|
|
|
31
|
-
Before adopting any future flags or call-site opt-in changes,
|
|
31
|
+
Before adopting any future flags or call-site opt-in changes, update to the latest minor version of v7.x to make sure you have access to the latest flags. You may see a number of deprecation warnings as you upgrade, which we'll cover below.
|
|
32
32
|
|
|
33
33
|
👉 Update to latest v7
|
|
34
34
|
|
|
@@ -140,7 +140,7 @@ Most users won't need to make any changes. However, if you have custom Vite conf
|
|
|
140
140
|
|
|
141
141
|
For example, a custom server build should move its SSR `rollupOptions` from the top-level `build` config into `environments.ssr.build`:
|
|
142
142
|
|
|
143
|
-
```diff filename=vite.config.ts
|
|
143
|
+
```tsx diff filename=vite.config.ts
|
|
144
144
|
import { reactRouter } from "@react-router/dev/vite";
|
|
145
145
|
import { defineConfig } from "vite";
|
|
146
146
|
|
|
@@ -243,7 +243,7 @@ export async function loader({
|
|
|
243
243
|
|
|
244
244
|
React Router serves Framework mode data requests from `.data` URLs. Previously, data requests for routes with and without trailing slashes could map to the same `.data` URL because trailing slashes were not considered during URL generation. This flag preserves trailing slash semantics for data request URLs to avoid ambiguity when your app distinguishes between trailing-slash and non-trailing-slash URLs.
|
|
245
245
|
|
|
246
|
-
|
|
246
|
+
In v7, your HTTP and `request` pathnames are as follows for `/a/b/c` and `/a/b/c/`
|
|
247
247
|
|
|
248
248
|
| URL `/a/b/c` | **HTTP pathname** | **`request` pathname`** |
|
|
249
249
|
| ------------ | ----------------- | ----------------------- |
|
|
@@ -255,7 +255,7 @@ Currently, your HTTP and `request` pathnames would be as follows for `/a/b/c` an
|
|
|
255
255
|
| **Document** | `/a/b/c/` | `/a/b/c/` ✅ |
|
|
256
256
|
| **Data** | `/a/b/c.data` | `/a/b/c` ⚠️ |
|
|
257
257
|
|
|
258
|
-
With this flag enabled, these pathnames
|
|
258
|
+
With this flag enabled, these pathnames are made consistent through a new `_.data` format for client-side `.data` requests:
|
|
259
259
|
|
|
260
260
|
| URL `/a/b/c` | **HTTP pathname** | **`request` pathname`** |
|
|
261
261
|
| ------------ | ----------------- | ----------------------- |
|
|
@@ -285,11 +285,11 @@ export default {
|
|
|
285
285
|
|
|
286
286
|
If you have custom app, CDN, cache, or rewrite logic that matches `.data` request URLs, update it to handle the new trailing-slash-aware `/_.data` format.
|
|
287
287
|
|
|
288
|
-
## Other
|
|
288
|
+
## Other Breaking Changes
|
|
289
289
|
|
|
290
|
-
The changes in this section are not controlled by future flags, but you can update your code
|
|
290
|
+
The changes in this section are not controlled by future flags, but you can update your code while still on v7 before moving to v8.
|
|
291
291
|
|
|
292
|
-
### `meta` `data`
|
|
292
|
+
### `meta`/`matches` `data` Values
|
|
293
293
|
|
|
294
294
|
[MODES: framework]
|
|
295
295
|
|
|
@@ -298,13 +298,19 @@ The changes in this section are not controlled by future flags, but you can upda
|
|
|
298
298
|
|
|
299
299
|
**Background**
|
|
300
300
|
|
|
301
|
-
|
|
301
|
+
React Router v8 removed deprecated `data` fields in favor of `loaderData` in a few places:
|
|
302
|
+
|
|
303
|
+
- `meta` function `data` argument
|
|
304
|
+
- `meta` function `matches` argument (`matches[i].data`)
|
|
305
|
+
- `useMatches()` (`matches[i].data`)
|
|
306
|
+
|
|
307
|
+
Use `loaderData` instead on `MetaArgs`, each item in `MetaArgs.matches`, and each match returned from `useMatches()`
|
|
302
308
|
|
|
303
309
|
👉 **Update your Code**
|
|
304
310
|
|
|
305
311
|
Replace `data` with `loaderData` in your `meta` functions:
|
|
306
312
|
|
|
307
|
-
```diff
|
|
313
|
+
```tsx diff
|
|
308
314
|
export function meta({
|
|
309
315
|
- data,
|
|
310
316
|
+ loaderData,
|
|
@@ -321,7 +327,7 @@ export function meta({
|
|
|
321
327
|
|
|
322
328
|
If you read data from parent matches, update those references too:
|
|
323
329
|
|
|
324
|
-
```diff
|
|
330
|
+
```tsx diff
|
|
325
331
|
export function meta({ matches }: Route.MetaArgs) {
|
|
326
332
|
let rootMatch = matches.find((match) => match.id === "root");
|
|
327
333
|
- let rootData = rootMatch?.data;
|
|
@@ -331,6 +337,17 @@ export function meta({ matches }: Route.MetaArgs) {
|
|
|
331
337
|
}
|
|
332
338
|
```
|
|
333
339
|
|
|
340
|
+
Replace `data` with `loaderData` on `useMatches()` calls:
|
|
341
|
+
|
|
342
|
+
```tsx diff
|
|
343
|
+
export default function Component({ matches, loaderData }: ComponentProps) {
|
|
344
|
+
let matches = useMatches();
|
|
345
|
+
- const rootLoaderData = matches[0].data;
|
|
346
|
+
+ const rootLoaderData = matches[0].loaderData;
|
|
347
|
+
// ...
|
|
348
|
+
}
|
|
349
|
+
```
|
|
350
|
+
|
|
334
351
|
### `react-router-dom`
|
|
335
352
|
|
|
336
353
|
[MODES: framework, data, declarative]
|
|
@@ -340,7 +357,7 @@ export function meta({ matches }: Route.MetaArgs) {
|
|
|
340
357
|
|
|
341
358
|
**Background**
|
|
342
359
|
|
|
343
|
-
React Router v8
|
|
360
|
+
React Router v8 removes the `react-router-dom` re-export package. In v8, you should import DOM-specific APIs from `react-router/dom` and everything else from `react-router`.
|
|
344
361
|
|
|
345
362
|
👉 **Update your Code**
|
|
346
363
|
|
|
@@ -352,14 +369,14 @@ npm uninstall react-router-dom
|
|
|
352
369
|
|
|
353
370
|
Replace `react-router-dom` imports with `react-router` imports:
|
|
354
371
|
|
|
355
|
-
```diff
|
|
372
|
+
```tsx diff
|
|
356
373
|
-import { Link, useLocation } from "react-router-dom";
|
|
357
374
|
+import { Link, useLocation } from "react-router";
|
|
358
375
|
```
|
|
359
376
|
|
|
360
377
|
For DOM-specific APIs, import from `react-router/dom`:
|
|
361
378
|
|
|
362
|
-
```diff
|
|
379
|
+
```tsx diff
|
|
363
380
|
-import { RouterProvider } from "react-router-dom";
|
|
364
381
|
+import { RouterProvider } from "react-router/dom";
|
|
365
382
|
```
|
|
@@ -373,13 +390,13 @@ For DOM-specific APIs, import from `react-router/dom`:
|
|
|
373
390
|
|
|
374
391
|
**Background**
|
|
375
392
|
|
|
376
|
-
React Router v8
|
|
393
|
+
React Router v8 removes the React Router Cloudflare dev proxy. Cloudflare projects should use [`@cloudflare/vite-plugin`][cloudflare-vite-plugin] instead.
|
|
377
394
|
|
|
378
395
|
👉 **Update your Code**
|
|
379
396
|
|
|
380
397
|
Replace `cloudflareDevProxy` with `cloudflare`:
|
|
381
398
|
|
|
382
|
-
```diff filename=vite.config.ts
|
|
399
|
+
```tsx diff filename=vite.config.ts
|
|
383
400
|
import { reactRouter } from "@react-router/dev/vite";
|
|
384
401
|
-import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
|
|
385
402
|
+import { cloudflare } from "@cloudflare/vite-plugin";
|
|
@@ -403,11 +420,11 @@ export default defineConfig({
|
|
|
403
420
|
|
|
404
421
|
**Background**
|
|
405
422
|
|
|
406
|
-
|
|
423
|
+
In v7, the `@react-router/architect` adapter uses `X-Forwarded-Host` when creating the `request`, falling back to the `Host` header. In React Router v8, the adapter uses `event.requestContext.domainName` by default, falling back to the `Host` header.
|
|
407
424
|
|
|
408
425
|
👉 **Update your Code**
|
|
409
426
|
|
|
410
|
-
Opt in to the v8 behavior
|
|
427
|
+
Opt in to the v8 behavior while still on v7 by passing `useRequestContextDomainName: true`:
|
|
411
428
|
|
|
412
429
|
```ts
|
|
413
430
|
import { createRequestHandler } from "@react-router/architect";
|
|
@@ -419,11 +436,11 @@ export const handler = createRequestHandler({
|
|
|
419
436
|
});
|
|
420
437
|
```
|
|
421
438
|
|
|
422
|
-
This option
|
|
439
|
+
This option is removed in v8 because the `event.requestContext.domainName` behavior is the default.
|
|
423
440
|
|
|
424
441
|
## Upgrade to v8
|
|
425
442
|
|
|
426
|
-
Now that your app is caught up,
|
|
443
|
+
Now that your app is caught up, update to v8:
|
|
427
444
|
|
|
428
445
|
```shellscript nonumber
|
|
429
446
|
# data/declarative mode
|