react-router 8.0.0-pre.1 → 8.0.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 +45 -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.js +1 -1
- 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.js +1 -1
- package/dist/development/lib/href.js +1 -1
- 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 +1 -1
- package/dist/development/lib/router/url.js +1 -1
- package/dist/development/lib/router/utils.js +1 -1
- 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.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.js +1 -1
- 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.js +1 -1
- package/dist/production/lib/href.js +1 -1
- 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 +1 -1
- package/dist/production/lib/router/url.js +1 -1
- package/dist/production/lib/router/utils.js +1 -1
- 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.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/how-to/middleware.md +8 -89
- package/docs/how-to/status.md +1 -1
- package/docs/index.md +3 -6
- package/docs/start/framework/deploying.md +1 -1
- package/docs/start/modes.md +1 -2
- package/docs/upgrading/component-routes.md +2 -2
- package/docs/upgrading/future.md +58 -11
- package/docs/upgrading/router-provider.md +6 -3
- package/docs/upgrading/v7.md +443 -0
- package/package.json +6 -6
- package/docs/upgrading/remix.md +0 -403
- package/docs/upgrading/v6.md +0 -382
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* react-router v8.0.0
|
|
2
|
+
* react-router v8.0.0
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Remix Software Inc.
|
|
5
5
|
*
|
|
@@ -22,7 +22,7 @@ import * as React$1 from "react";
|
|
|
22
22
|
//#region lib/dom/lib.tsx
|
|
23
23
|
const isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
|
|
24
24
|
try {
|
|
25
|
-
if (isBrowser) window.__reactRouterVersion = "8.0.0
|
|
25
|
+
if (isBrowser) window.__reactRouterVersion = "8.0.0";
|
|
26
26
|
} catch (e) {}
|
|
27
27
|
/**
|
|
28
28
|
* Create a new {@link DataRouter| data router} that manages the application
|
|
@@ -91,24 +91,18 @@ export default function Dashboard({
|
|
|
91
91
|
}
|
|
92
92
|
```
|
|
93
93
|
|
|
94
|
-
### 3.
|
|
94
|
+
### 3. Add a `getLoadContext` function (if applicable)
|
|
95
95
|
|
|
96
|
-
If you're using a custom server
|
|
96
|
+
If you're using a custom server, you can use a `getLoadContext` function to pass information to into the react router handlers:
|
|
97
97
|
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
+ RouterContextProvider,
|
|
102
|
-
+} from "react-router";
|
|
103
|
-
import { createDb } from "./db";
|
|
104
|
-
|
|
105
|
-
+const dbContext = createContext<Database>();
|
|
98
|
+
```tsx
|
|
99
|
+
import { RouterContextProvider } from "react-router";
|
|
100
|
+
import { dbContext, createDb } from "./db";
|
|
106
101
|
|
|
107
102
|
function getLoadContext(req, res) {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
+ return context;
|
|
103
|
+
const context = new RouterContextProvider();
|
|
104
|
+
context.set(dbContext, createDb());
|
|
105
|
+
return context;
|
|
112
106
|
}
|
|
113
107
|
```
|
|
114
108
|
|
|
@@ -474,72 +468,6 @@ export const middleware: Route.MiddlewareFunction[] = [
|
|
|
474
468
|
|
|
475
469
|
Which `ErrorBoundary` is rendered will differ based on whether your middleware threw _before_ or _after_ calling then `next()` function. If it throws _after_ then it will bubble up from the throwing route just like a normal loader error because we've already run the loaders and have the appropriate `loaderData` to render in the route components. However, if an error is thrown _before_ calling `next()`, then we haven't called any loaders yet and there is no `loaderData` available. When this happens, we must bubble up to the highest route with a `loader` and start looking for an `ErrorBoundary` there. We cannot render any route components at that level or below without any `loaderData`.
|
|
476
470
|
|
|
477
|
-
## Changes to `getLoadContext`/`AppLoadContext`
|
|
478
|
-
|
|
479
|
-
<docs-info>This only applies if you are using a custom server and a custom `getLoadContext` function</docs-info>
|
|
480
|
-
|
|
481
|
-
Middleware introduces a breaking change to the `context` parameter generated by `getLoadContext` and passed to your `action`s and `loader`s. The current approach of a module-augmented `AppLoadContext` isn't really type-safe and instead just sort of tells TypeScript to "trust me".
|
|
482
|
-
|
|
483
|
-
Middleware needs an equivalent `context` on the client for `clientMiddleware`, but we didn't want to duplicate this pattern from the server that we already weren't thrilled with, so we decided to introduce a new API where we could tackle type-safety.
|
|
484
|
-
|
|
485
|
-
When opting into middleware, the `context` parameter changes to an instance of [`RouterContextProvider`][RouterContextProvider]:
|
|
486
|
-
|
|
487
|
-
```ts
|
|
488
|
-
let dbContext = createContext<Database>();
|
|
489
|
-
let context = new RouterContextProvider();
|
|
490
|
-
context.set(dbContext, getDb());
|
|
491
|
-
// ^ type-safe
|
|
492
|
-
let db = context.get(dbContext);
|
|
493
|
-
// ^ Database
|
|
494
|
-
```
|
|
495
|
-
|
|
496
|
-
If you're using a custom server and a `getLoadContext` function, you will need to update your implementation to return an instance of [`RouterContextProvider`][RouterContextProvider], instead of a plain JavaScript object:
|
|
497
|
-
|
|
498
|
-
```diff
|
|
499
|
-
+import {
|
|
500
|
-
+ createContext,
|
|
501
|
-
+ RouterContextProvider,
|
|
502
|
-
+} from "react-router";
|
|
503
|
-
import { createDb } from "./db";
|
|
504
|
-
|
|
505
|
-
+const dbContext = createContext<Database>();
|
|
506
|
-
|
|
507
|
-
function getLoadContext(req, res) {
|
|
508
|
-
- return { db: createDb() };
|
|
509
|
-
+ const context = new RouterContextProvider();
|
|
510
|
-
+ context.set(dbContext, createDb());
|
|
511
|
-
+ return context;
|
|
512
|
-
}
|
|
513
|
-
```
|
|
514
|
-
|
|
515
|
-
### Migration from `AppLoadContext`
|
|
516
|
-
|
|
517
|
-
If you're currently using `AppLoadContext`, you can migrate incrementally by using your existing module augmentation to augment [`RouterContextProvider`][RouterContextProvider] instead of `AppLoadContext`. Then, update your `getLoadContext` function to return an instance of [`RouterContextProvider`][RouterContextProvider]:
|
|
518
|
-
|
|
519
|
-
```diff
|
|
520
|
-
declare module "react-router" {
|
|
521
|
-
- interface AppLoadContext {
|
|
522
|
-
+ interface RouterContextProvider {
|
|
523
|
-
db: Database;
|
|
524
|
-
user: User;
|
|
525
|
-
}
|
|
526
|
-
}
|
|
527
|
-
|
|
528
|
-
function getLoadContext() {
|
|
529
|
-
const loadContext = {...};
|
|
530
|
-
- return loadContext;
|
|
531
|
-
+ let context = new RouterContextProvider();
|
|
532
|
-
+ Object.assign(context, loadContext);
|
|
533
|
-
+ return context;
|
|
534
|
-
}
|
|
535
|
-
```
|
|
536
|
-
|
|
537
|
-
This allows you to leave your `action`s/`loader`s untouched during initial adoption of middleware, since they can still read values directly (i.e., `context.db`).
|
|
538
|
-
|
|
539
|
-
<docs-warning>This approach is only intended to be used as a migration strategy when adopting middleware in React Router v7, allowing you to incrementally migrate to `context.set`/`context.get`. It is not safe to assume this approach will work in the next major version of React Router.</docs-warning>
|
|
540
|
-
|
|
541
|
-
<docs-warning>The [`RouterContextProvider`][RouterContextProvider] class is also used for the client-side `context` parameter via `<HydratedRouter getContext>` and `<RouterProvider getContext>`. Since `AppLoadContext` is primarily intended as a hand-off from your HTTP server into the React Router handlers, you need to be aware that these augmented fields will not be available in `clientMiddleware`, `clientLoader`, or `clientAction` functions even thought TypeScript will tell you they are (unless, of course, you provide the fields via `getContext` on the client).</docs-warning>
|
|
542
|
-
|
|
543
471
|
## Common Patterns
|
|
544
472
|
|
|
545
473
|
### Authentication
|
|
@@ -700,24 +628,15 @@ export async function loader({
|
|
|
700
628
|
}
|
|
701
629
|
```
|
|
702
630
|
|
|
703
|
-
[future-flags]: ../upgrading/future
|
|
704
631
|
[Response]: https://developer.mozilla.org/en-US/docs/Web/API/Response
|
|
705
632
|
[common-patterns]: #common-patterns
|
|
706
633
|
[server-client]: #server-vs-client-middleware
|
|
707
|
-
[create-browser-router]: ../api/data-routers/createBrowserRouter
|
|
708
|
-
[create-hash-router]: ../api/data-routers/createHashRouter
|
|
709
|
-
[create-memory-router]: ../api/data-routers/createMemoryRouter
|
|
710
|
-
[create-static-handler]: ../api/data-routers/createStaticHandler
|
|
711
634
|
[framework-action]: ../start/framework/route-module#action
|
|
712
635
|
[framework-loader]: ../start/framework/route-module#loader
|
|
713
|
-
[getloadcontext]: #changes-to-getloadcontextapploadcontext
|
|
714
636
|
[datastrategy]: ../api/data-routers/createBrowserRouter#optsdatastrategy
|
|
715
637
|
[cms-redirect]: #cms-redirect-on-404
|
|
716
638
|
[createContext]: ../api/utils/createContext
|
|
717
|
-
[RouterContextProvider]: ../api/utils/RouterContextProvider
|
|
718
639
|
[getContext]: ../api/data-routers/createBrowserRouter#optsgetContext
|
|
719
|
-
[window]: https://developer.mozilla.org/en-US/docs/Web/API/Window
|
|
720
|
-
[document]: https://developer.mozilla.org/en-US/docs/Web/API/Document
|
|
721
640
|
[request]: https://developer.mozilla.org/en-US/docs/Web/API/Request
|
|
722
641
|
[data-action]: ../start/data/route-object#action
|
|
723
642
|
[data-loader]: ../start/data/route-object#loader
|
package/docs/how-to/status.md
CHANGED
|
@@ -54,7 +54,7 @@ export async function loader({ params }: Route.ActionArgs) {
|
|
|
54
54
|
let project = await fakeDb.getProject(params.id);
|
|
55
55
|
if (!project) {
|
|
56
56
|
// throw to ErrorBoundary
|
|
57
|
-
throw data(
|
|
57
|
+
throw data("Not Found", { status: 404 });
|
|
58
58
|
}
|
|
59
59
|
return project;
|
|
60
60
|
}
|
package/docs/index.md
CHANGED
|
@@ -5,7 +5,7 @@ order: 1
|
|
|
5
5
|
|
|
6
6
|
# React Router Home
|
|
7
7
|
|
|
8
|
-
React Router is a multi-strategy router for React
|
|
8
|
+
React Router is a multi-strategy router for React. You can use it maximally as a React framework or as minimally as you want.
|
|
9
9
|
|
|
10
10
|
## Getting Started
|
|
11
11
|
|
|
@@ -29,11 +29,8 @@ These icons indicate which mode the content is relevant to.
|
|
|
29
29
|
|
|
30
30
|
Additional auto-generated reference documentation is available:
|
|
31
31
|
|
|
32
|
-
[Autogenerated Reference Docs ↗](https://api.reactrouter.com/
|
|
32
|
+
[Autogenerated Reference Docs ↗](https://api.reactrouter.com/v8/)
|
|
33
33
|
|
|
34
34
|
## Upgrading
|
|
35
35
|
|
|
36
|
-
If you are caught up on future flags, upgrading from React Router
|
|
37
|
-
|
|
38
|
-
- [Upgrade from v6](./upgrading/v6)
|
|
39
|
-
- [Upgrade from Remix](./upgrading/remix)
|
|
36
|
+
If you are caught up on future flags, [upgrading from React Router v7](./upgrading/v7) is generally non-breaking.
|
|
@@ -97,4 +97,4 @@ EdgeOne Pages maintains their own template for React Router. Checkout the [EdgeO
|
|
|
97
97
|
|
|
98
98
|
### DeployHQ
|
|
99
99
|
|
|
100
|
-
DeployHQ maintains their own guide for deploying React Router
|
|
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.
|