diff --git a/.agents/skills/fix-bug/SKILL.md b/.agents/skills/fix-bug/SKILL.md index eaded97045..5134491b27 100644 --- a/.agents/skills/fix-bug/SKILL.md +++ b/.agents/skills/fix-bug/SKILL.md @@ -1,6 +1,6 @@ --- name: fix-bug -description: Fix a reported bug in React Router from a GitHub issue. Use when the user provides a GitHub issue URL and asks to fix a bug, investigate an issue, or reproduce a problem. Handles the full workflow: fetching the issue, finding the reproduction, writing a failing test, and implementing the fix. +description: "Fix a reported bug in React Router from a GitHub issue. Use when the user provides a GitHub issue URL and asks to fix a bug, investigate an issue, or reproduce a problem. Handles the full workflow: fetching the issue, finding the reproduction, writing a failing test, and implementing the fix." disable-model-invocation: true --- diff --git a/contributors.yml b/contributors.yml index 66160fc8dc..61aae02e3c 100644 --- a/contributors.yml +++ b/contributors.yml @@ -307,6 +307,7 @@ - mm-jpoole - mobregozo - modex98 +- morgan-coded - morleytatro - ms10596 - mspiess diff --git a/docs/how-to/data-strategy.md b/docs/how-to/data-strategy.md index 476fefc93e..bf94881d0d 100644 --- a/docs/how-to/data-strategy.md +++ b/docs/how-to/data-strategy.md @@ -184,9 +184,9 @@ return results; This is an unlikely use-case now that React Router has built-in middleware, but if you wish to use a custom middleware you can do so with a `dataStrategy`. -Let's define a middleware on each route via [`handle`](../../start/data/route-object#handle) +Let's define a middleware on each route via [`handle`](../start/data/route-object#handle) and call middleware sequentially first, then call all -[`loader`](../../start/data/route-object#loader)s in parallel - providing +[`loader`](../start/data/route-object#loader)s in parallel - providing any data made available via the middleware: ```ts @@ -258,7 +258,7 @@ let router = createBrowserRouter(routes, { ### Custom Handler -It's also possible you don't even want to define a [`loader`](../../start/daoute-object#loader) +It's also possible you don't even want to define a [`loader`](../start/data/route-object#loader) implementation at the route level. Maybe you want to just determine the routes and issue a single GraphQL request for all of your data. You can do that by setting your `route.loader=true` so it qualifies as "having a diff --git a/docs/tutorials/address-book.md b/docs/tutorials/address-book.md index 4ee81b385f..ac47c49926 100644 --- a/docs/tutorials/address-book.md +++ b/docs/tutorials/address-book.md @@ -1939,7 +1939,7 @@ Now the star _immediately_ changes to the new state when you click it. That's it! Thanks for giving React Router a shot. We hope this tutorial gives you a solid start to build great user experiences. There's a lot more you can do, so make sure to check out all the [APIs][react-router-apis] 😀 [http-localhost-5173]: http://localhost:5173 -[root-route]: ../explanation/special-files#roottsx +[root-route]: ../api/framework-conventions/root.tsx [error-boundaries]: ../how-to/error-boundary [links]: ../start/framework/route-module#links [outlet-component]: https://api.reactrouter.com/v7/functions/react-router.Outlet @@ -1949,7 +1949,7 @@ That's it! Thanks for giving React Router a shot. We hope this tutorial gives yo [client-loader]: ../start/framework/route-module#clientloader [spa]: ../how-to/spa [type-safety]: ../explanation/type-safety -[react-router-config]: ../explanation/special-files#react-routerconfigts +[react-router-config]: ../api/framework-conventions/react-router.config.ts [rendering-strategies]: ../start/framework/rendering [index-route]: ../start/framework/routing#index-routes [layout-route]: ../start/framework/routing#layout-routes diff --git a/docs/upgrading/future.md b/docs/upgrading/future.md index 5124615305..ee4053030d 100644 --- a/docs/upgrading/future.md +++ b/docs/upgrading/future.md @@ -61,7 +61,7 @@ const router = createBrowserRouter(routes, { If you're using the `context` parameter in `loader` and `action` functions, you may need to update your code: - In Framework mode, if you're using `react-router-serve`, you should not need to make any updates. Otherwise, this only applies if you have a custom server with a `getLoadContext` function. Please see the docs on the middleware [`getLoadContext` changes](../how-to/middleware#changes-to-getloadcontextapploadcontext) and the instructions to [migrate to the new API](../how-to/middleware#migration-from-apploadcontext). -- In Data mode, add the `Future` module augmentation described in the [middleware docs](../how-to/middleware#2-typescript-augment-future-for-loaderaction-context) so `context` is typed correctly. +- In Data mode, add the `Future` module augmentation described in the [middleware docs](../how-to/middleware#1-typescript-augment-future-for-loaderaction-context) so `context` is typed correctly. ## `future.v8_splitRouteModules` @@ -117,7 +117,38 @@ export default { **Update your Code** -No code changes are required unless you have custom Vite configuration that needs to be updated for the [Environment API][vite-environment]. Most users won't need to make any changes. +Most users won't need to make any changes. However, if you have custom Vite configuration that previously relied on the `isSsrBuild` flag — such as a custom server build that sets `build.rollupOptions.input` — you'll need to move that configuration under the per-environment [Environment API][vite-environment] config instead. + +For example, a custom server build should move its SSR `rollupOptions` from the top-level `build` config into `environments.ssr.build`: + +```diff filename=vite.config.ts +import { reactRouter } from "@react-router/dev/vite"; +import { defineConfig } from "vite"; + +-export default defineConfig(({ isSsrBuild }) => ({ +- build: { +- rollupOptions: isSsrBuild +- ? { +- input: "./server/app.ts", +- } +- : undefined, +- }, ++export default defineConfig({ ++ environments: { ++ ssr: { ++ build: { ++ rollupOptions: { ++ input: "./server/app.ts", ++ }, ++ }, ++ }, ++ }, + plugins: [reactRouter()], +-})); ++}); +``` + +See the [`node-custom-server` template][node-custom-server-template] for a complete example. ## `future.v8_passThroughRequests` @@ -246,3 +277,4 @@ _No current unstable flags to document_ [observability]: ../how-to/instrumentation [Response]: https://developer.mozilla.org/en-US/docs/Web/API/Response [vite-environment]: https://vite.dev/guide/api-environment +[node-custom-server-template]: https://github.com/remix-run/react-router-templates/blob/7c617a435510bc3add3a5395c07bc65328b65e9e/node-custom-server/vite.config.ts