Merge branch 'main' into release

Author: brophdawg11

contributors.yml

@@ -306,6 +306,7 @@
 - mtliendo
 - namoscato
 - Nandann018-ux
+- NandkishorJadoun
 - nanianlisao
 - ned-park
 - nenene3

docs/api/utils/redirect.md

@@ -26,6 +26,9 @@ A redirect [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Respons
 Sets the status code and the [`Location`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Location)
 header. Defaults to [`302 Found`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/302).
 
+This utility accepts absolute URLs and can navigate to external domains, so
+the application should validate any user-supplied inputs to redirects.
+
 ```tsx
 import { redirect } from "react-router";
 

docs/api/utils/redirectDocument.md

@@ -27,6 +27,9 @@ that will force a document reload to the new location. Sets the status code
 and the [`Location`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Location)
 header. Defaults to [`302 Found`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/302).
 
+This utility accepts absolute URLs and can navigate to external domains, so
+the application should validate any user-supplied inputs to redirects.
+
 ```tsx filename=routes/logout.tsx
 import { redirectDocument } from "react-router";
 

docs/how-to/middleware.md

@@ -9,8 +9,6 @@ title: Middleware
 <br/>
 <br/>
 
-<docs-info>In Framework Mode, you must opt-into middleware via the [`future.v8_middleware`][future-flags] flag because it contains a minor [breaking change][getloadcontext] to the `getLoadContext` function and the loader/action `context` parameter.</docs-info>
-
 Middleware allows you to run code before and after the [`Response`][Response] generation for the matched path. This enables [common patterns][common-patterns] like authentication, logging, error handling, and data preprocessing in a reusable way.
 
 Middleware runs in a nested chain, executing from parent routes to child routes on the way "down" to your route handlers, then from child routes back to parent routes on the way "up" after a [`Response`][Response] is generated.
@@ -132,12 +130,27 @@ function getLoadContext(req, res) {
 
 ## Quick Start (Data Mode)
 
-<docs-info>Note there is no future flag in Data Mode because you can opt-into middleware by adding it to your routes, no breaking changes exist that require a future flag.</docs-info>
+### 1. TypeScript: augment `Future` for loader/action `context`
 
-### 1. Create a context
+In order to properly type your `context` param in your `loader`/`action`/`middleware` functions, you will need a small module augmentation to override the default context type of `any`:
 
-Middleware uses a `context` provider instance to provide data down the middleware chain.
-You can create type-safe context objects using [`createContext`][createContext]:
+```ts
+// src/react-router.d.ts
+
+import "react-router";
+
+declare module "react-router" {
+  interface Future {
+    v8_middleware: true;
+  }
+}
+```
+
+Without this, `context` stays loosely typed even when middleware is enabled at runtime.
+
+### 2. Create a context
+
+Middleware uses a `context` provider to pass data through the middleware chain into loaders and actions. Create typed context with [`createContext`][createContext]:
 
 ```ts
 import { createContext } from "react-router";
@@ -146,10 +159,16 @@ import type { User } from "~/types";
 export const userContext = createContext<User | null>(null);
 ```
 
-### 2. Add middleware to your routes
+### 3. Add `middleware` to route objects
+
+Attach `middleware` arrays to your route objects:
 
 ```tsx
-import { redirect } from "react-router";
+import {
+  redirect,
+  useLoaderData,
+  type LoaderFunctionArgs,
+} from "react-router";
 import { userContext } from "~/context";
 
 const routes = [
@@ -159,10 +178,10 @@ const routes = [
     Component: Root,
     children: [
       {
-        path: "profile",
+        path: "dashboard",
         middleware: [authMiddleware], // 👈
-        loader: profileLoader,
-        Component: Profile,
+        loader: dashboardLoader,
+        Component: Dashboard,
       },
       {
         path: "login",
@@ -187,15 +206,15 @@ async function authMiddleware({ context }) {
   context.set(userContext, user);
 }
 
-export async function profileLoader({
+export async function dashboardLoader({
   context,
-}: Route.LoaderArgs) {
+}: LoaderFunctionArgs) {
   const user = context.get(userContext);
   const profile = await getProfile(user);
   return { profile };
 }
 
-export default function Profile() {
+export default function Dashboard() {
   let loaderData = useLoaderData();
   return (
     <div>
@@ -206,9 +225,9 @@ export default function Profile() {
 }
 ```
 
-### 3. Add a `getContext` function (optional)
+### 4. Add a `getContext` function (optional)
 
-If you wish to include a base context on all navigations/fetches, you can add an [`getContext`][getContext] function to your router. This will be called to populate a fresh context on every navigation/fetch.
+To seed every navigation or fetcher call with shared values, pass [`getContext`][getContext] when creating the router:
 
 ```tsx
 let sessionContext = createContext();
@@ -222,7 +241,7 @@ const router = createBrowserRouter(routes, {
 });
 ```
 
-<docs-info>This API exists to mirror the `getLoadContext` API on the server in Framework Mode, which exists as a way to hand off values from your HTTP server to the React Router handler. This [`getContext`][getContext] API can be used to hand off global values from the [`window`][window]/[`document`][document] to React Router, but because they're all running in the same context (the browser), you can achieve effectively the same behavior with root route middleware. Therefore, you may not need this API the same way you would on the server - but it's provided for consistency.</docs-warning>
+<docs-info>This mirrors Framework mode’s server-side [`getLoadContext`][getloadcontext]. In the browser, root `middleware` can often do the same job, but `getContext` is available when you want to seed every request up front.</docs-info>
 
 ## Core Concepts
 
@@ -250,7 +269,7 @@ Client middleware runs in the browser in framework and data mode for client-side
 async function clientMiddleware({ request }, next) {
   console.log(request.method, request.url);
   await next();
-  console.log(response.status, request.method, request.url);
+  console.log(`Finished ${request.method} ${request.url}`);
 }
 
 // Framework mode
@@ -720,6 +739,10 @@ export async function loader({
 [common-patterns]: #common-patterns
 [server-client]: #server-vs-client-middleware
 [rr-config]: ../api/framework-conventions/react-router.config.ts
+[create-browser-router]: ../api/data-routers/createBrowserRouter
+[create-hash-router]: ../api/data-routers/createHashRouter
+[create-memory-router]: ../api/data-routers/createMemoryRouter
+[create-static-handler]: ../api/data-routers/createStaticHandler
 [framework-action]: ../start/framework/route-module#action
 [framework-loader]: ../start/framework/route-module#loader
 [getloadcontext]: #changes-to-getloadcontextapploadcontext

docs/how-to/react-server-components.md

@@ -77,7 +77,7 @@ export default defineConfig({
 
 ### Build Output
 
-The RSC Framework Mode server build file (`build/server/index.js`) now exports a `default` request handler function (`(request: Request) => Promise<Response>`) for document/data requests.
+The RSC Framework Mode server build file (`build/server/index.js`) exports a `default` request handler function (`(request: Request) => Promise<Response>`) for document/data requests.
 
 If needed, you can convert this into a [standard Node.js request listener][node-request-listener] for use with Node's built-in `http.createServer` function (or anything that supports it, e.g. [Express][express]) by using the `createRequestListener` function from [@remix-run/node-fetch-server][node-fetch-server].
 
@@ -104,7 +104,7 @@ app.listen(3000);
 
 ### React Elements From Loaders/Actions
 
-In RSC Framework Mode, loaders and actions can now return React elements along with other data. These elements will only ever be rendered on the server.
+In RSC Framework Mode, loaders and actions can return React elements along with other data. These elements will only ever be rendered on the server.
 
 ```tsx
 import type { Route } from "./+types/route";
@@ -133,6 +133,8 @@ If you need to use client-only features (e.g. [Hooks][hooks], event handlers) wi
 ```tsx filename=src/routes/counter/counter.tsx
 "use client";
 
+import { useState } from "react";
+
 export function Counter() {
   const [count, setCount] = useState(0);
   return (
@@ -173,7 +175,9 @@ export default function Route({
 
 ### Route Server Components
 
-If a route exports a `ServerComponent` instead of the typical `default` component export, this will be a server component rather than the usual client component. A default export and `ServerComponent` can not both be exported from the same route module, but you can still export client-only annotations like `clientLoader` and `clientAction` alongside a `ServerComponent`, along with any other component exports such as `ErrorBoundary` or `Layout`.
+If a route exports a `ServerComponent` instead of the typical `default` component export, the route renders on the server instead of the client. A route module cannot export both `default` and `ServerComponent`.
+
+You can still export client-only annotations like `clientLoader` and `clientAction` alongside a `ServerComponent`. The other route module component exports follow the same client/server split: `ErrorBoundary`, `Layout`, and `HydrateFallback` are client components, while `ServerErrorBoundary`, `ServerLayout`, and `ServerHydrateFallback` render on the server.
 
 The following route module components have their own mutually exclusive server component counterparts:
 
@@ -213,6 +217,8 @@ If you need to use client-only features (e.g. [Hooks][hooks], event handlers) wi
 ```tsx filename=src/routes/counter/counter.tsx
 "use client";
 
+import { useState } from "react";
+
 export function Counter() {
   const [count, setCount] = useState(0);
   return (
@@ -287,6 +293,8 @@ The plugin will automatically detect custom entry files in your `app` directory:
 
 If these files are not found, React Router will use the default entries provided by the framework.
 
+If you want to inspect the generated defaults before overriding them, you can also use `react-router reveal entry.client`, `react-router reveal entry.rsc`, and `react-router reveal entry.ssr`.
+
 #### Basic Override Pattern
 
 You can create a custom entry file that wraps or extends the default behavior. For example, to add custom logging to the RSC entry:
@@ -371,14 +379,11 @@ When copying default entries, make sure to maintain the required exports:
 
 ### Unsupported Config Options
 
-For the initial unstable release, the following options from `react-router.config.ts` are not yet supported in RSC Framework Mode:
+The following options from `react-router.config.ts` are not currently supported in RSC Framework Mode:
 
 - `buildEnd`
-- `prerender`
 - `presets`
-- `routeDiscovery`
 - `serverBundles`
-- `ssr: false` (SPA Mode)
 - `future.v8_splitRouteModules`
 - `future.unstable_subResourceIntegrity`
 
@@ -403,11 +408,13 @@ matchRSCServerRequest({
 });
 ```
 
-While you can define components inline, we recommend using the `lazy()` option and defining [Route Modules][route-module] for both startup performance and code organization
+While you can define components inline, we recommend using the `lazy()` option and defining [Route Modules][route-module] for both startup performance and code organization.
 
 <docs-info>
 
-The [Route Module API][route-module] up until now has been a [Framework Mode][framework-mode] only feature. However, the `lazy` field of the RSC route config expects the same exports as the Route Module exports, unifying the APIs even further.
+The `lazy` field of the RSC route config expects the same exports as the [Route Module API][route-module], which keeps the route-module shape consistent across [Framework Mode][framework-mode] and RSC Data Mode.
+
+That includes exports like `loader`, `action`, `meta`, `links`, `headers`, `ErrorBoundary`, `HydrateFallback`, and the client annotations.
 
 </docs-info>
 
@@ -542,6 +549,10 @@ export function clientAction() {}
 export function clientLoader() {}
 
 export function shouldRevalidate() {}
+
+export default function ClientRoot() {
+  return <p>Client route</p>;
+}
 ```
 
 We can then re-export these from our lazy loaded route module:
@@ -551,7 +562,7 @@ export {
   clientAction,
   clientLoader,
   shouldRevalidate,
-} from "./route.client";
+} from "./client";
 
 export default function Root() {
   // ...
@@ -566,7 +577,7 @@ export {
   clientAction,
   clientLoader,
   shouldRevalidate,
-} from "./route.client";
+} from "./client";
 
 export default function Root() {
   // Adding a Server Component at the root is required by bundlers
@@ -721,8 +732,12 @@ export async function generateHTML(
     // Provide the React Server touchpoints.
     createFromReadableStream,
     // Render the router to HTML.
-    async renderHTML(getPayload) {
-      const payload = getPayload();
+    async renderHTML(getPayload, options) {
+      const payload = await getPayload();
+      const formState =
+        payload.type === "render"
+          ? await payload.formState
+          : undefined;
 
       const bootstrapScriptContent =
         await import.meta.viteRsc.loadBootstrapScriptContent(
@@ -732,8 +747,10 @@ export async function generateHTML(
       return await renderHTMLToReadableStream(
         <RSCStaticRouter getPayload={getPayload} />,
         {
+          ...options,
           bootstrapScriptContent,
-          formState: payload.formState,
+          formState,
+          signal: request.signal,
         },
       );
     },
@@ -771,9 +788,9 @@ function fetchServer(request: Request) {
     // The app routes.
     routes: routes(),
     // Encode the match with the React Server implementation.
-    generateResponse(match) {
+    generateResponse(match, options) {
       return new Response(
-        renderToReadableStream(match.payload),
+        renderToReadableStream(match.payload, options),
         {
           status: match.statusCode,
           headers: match.headers,
@@ -811,8 +828,8 @@ import {
   unstable_createCallServer as createCallServer,
   unstable_getRSCStream as getRSCStream,
   unstable_RSCHydratedRouter as RSCHydratedRouter,
-  type unstable_RSCPayload as RSCServerPayload,
-} from "react-router";
+  type unstable_RSCPayload as RSCPayload,
+} from "react-router/dom";
 
 // Create and set the callServer function to support post-hydration server actions.
 setServerCallback(
@@ -824,31 +841,31 @@ setServerCallback(
 );
 
 // Get and decode the initial server payload.
-createFromReadableStream<RSCServerPayload>(
-  getRSCStream(),
-).then((payload) => {
-  startTransition(async () => {
-    const formState =
-      payload.type === "render"
-        ? await payload.formState
-        : undefined;
-
-    hydrateRoot(
-      document,
-      <StrictMode>
-        <RSCHydratedRouter
-          createFromReadableStream={
-            createFromReadableStream
-          }
-          payload={payload}
-        />
-      </StrictMode>,
-      {
-        formState,
-      },
-    );
-  });
-});
+createFromReadableStream<RSCPayload>(getRSCStream()).then(
+  (payload) => {
+    startTransition(async () => {
+      const formState =
+        payload.type === "render"
+          ? await payload.formState
+          : undefined;
+
+      hydrateRoot(
+        document,
+        <StrictMode>
+          <RSCHydratedRouter
+            createFromReadableStream={
+              createFromReadableStream
+            }
+            payload={payload}
+          />
+        </StrictMode>,
+        {
+          formState,
+        },
+      );
+    });
+  },
+);
 ```
 
 [picking-a-mode]: ../start/modes