diff --git a/CHANGELOG.md b/CHANGELOG.md index cd04244c69..1d84e14521 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3124,7 +3124,7 @@ async function fakeGetSlugsFromCms() { - If you are not using the Vite plugin and are manually calling `createBrowserRouter`/`createHashRouter`: - `import { RouterProvider } from "react-router/dom"` - Remove `future.v7_fetcherPersist` flag ([#11731](https://github.com/remix-run/react-router/pull/11731)) -- Allow returning `undefined` from loaders and actions ([#11680](https://github.com/remix-run/react-router/pull/11680), [#12057]([https://github.com/remix-run/react-router/pull/1205)) +- Allow returning `undefined` from loaders and actions ([#11680](https://github.com/remix-run/react-router/pull/11680), [#12057](https://github.com/remix-run/react-router/pull/12057)) - Use `createRemixRouter`/`RouterProvider` in `entry.client` instead of `RemixBrowser` ([#11469](https://github.com/remix-run/react-router/pull/11469)) - Remove the deprecated `json` utility ([#12146](https://github.com/remix-run/react-router/pull/12146)) - You can use [`Response.json`](https://developer.mozilla.org/en-US/docs/Web/API/Response/json_static) if you still need to construct JSON responses in your app diff --git a/README.md b/README.md index 947b7a88de..898d09db68 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ React Router is a multi-strategy router for React bridging the gap from React 18 to React 19. You can use it maximally as a React framework or minimally as a library with your own architecture. - [Getting Started - Framework](https://reactrouter.com/start/framework/installation) -- [Getting Started - Library](https://reactrouter.com/start/library/installation) +- [Getting Started - Declarative](https://reactrouter.com/start/declarative/installation) - [Upgrade from v6](https://reactrouter.com/upgrading/v6) - [Upgrade from Remix](https://reactrouter.com/upgrading/remix) - [Changelog](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md) diff --git a/decisions/0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md b/decisions/0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md index 35a6ec0a36..feb9b9ee1b 100644 --- a/decisions/0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md +++ b/decisions/0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md @@ -84,7 +84,7 @@ Remix will not yet support import maps. ### VS Code type hints -Users may configure an import map for the [Deno extension for VS Code](denoland.vscode-deno) to enable type hints for NPM-managed dependencies within their Deno editor: +Users may configure an import map for the [Deno extension for VS Code](https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno) to enable type hints for NPM-managed dependencies within their Deno editor: `.vscode/resolve_npm_imports_in_deno.json` diff --git a/docs/api/data-routers/RouterProvider.md b/docs/api/data-routers/RouterProvider.md index afd33ce036..5805419fda 100644 --- a/docs/api/data-routers/RouterProvider.md +++ b/docs/api/data-routers/RouterProvider.md @@ -77,7 +77,7 @@ The `errorInfo` parameter is passed along from and is only present for render errors. ```tsx - { + { let { location, params, pattern, errorInfo } = info; console.error(error, location, errorInfo); reportToErrorService(error, location, errorInfo); diff --git a/docs/api/framework-routers/HydratedRouter.md b/docs/api/framework-routers/HydratedRouter.md index 20ec986006..2435a26dc8 100644 --- a/docs/api/framework-routers/HydratedRouter.md +++ b/docs/api/framework-routers/HydratedRouter.md @@ -51,7 +51,7 @@ The `errorInfo` parameter is passed along from and is only present for render errors. ```tsx - { + { let { location, params, pattern, errorInfo } = info; console.error(error, location, errorInfo); reportToErrorService(error, location, errorInfo); diff --git a/docs/how-to/data-strategy.md b/docs/how-to/data-strategy.md index bf94881d0d..288db27906 100644 --- a/docs/how-to/data-strategy.md +++ b/docs/how-to/data-strategy.md @@ -158,11 +158,11 @@ const matchesToLoad = matches.filter((match) => { ## Migrating away from `shouldLoad` -Now that we have stabilized the new `match.shouldCallHandler()`/`match.shouldRevalidateArgs` fields, it's recommended to move away from the now-deprecated `match.shouldLoad` API. The prior boolean approach did not allow for custom `dataStrategy`functions to alter the default revalidation behavior, so the new function-based APIs were created to allow that. +Now that we have stabilized the new `match.shouldCallHandler()`/`match.shouldRevalidateArgs` fields, it's recommended to move away from the now-deprecated `match.shouldLoad` API. The prior boolean approach did not allow for custom `dataStrategy` functions to alter the default revalidation behavior, so the new function-based APIs were created to allow that. The major difference between these two APIs is that when using `shouldLoad`, calling `resolve()` would _only_ call the handler if `shouldLoad` was `true`. You could safely call it for all matches even if only a subset needed to have their handlers executed. -With `shouldCallHandler`, you are in charge of which handlers should be called so calling resolve will automatically call the handler. You should only call resolve on a the set of matches you wish to run handlers for. +With `shouldCallHandler`, you are in charge of which handlers should be called so calling resolve will automatically call the handler. You should only call resolve on the set of matches you wish to run handlers for. Here's an example change from the prior API to the new API. Note that we pre-filter the `matchesToLoad` before calling `resolve()`: diff --git a/docs/how-to/error-reporting.md b/docs/how-to/error-reporting.md index c111d659b6..649933e318 100644 --- a/docs/how-to/error-reporting.md +++ b/docs/how-to/error-reporting.md @@ -104,7 +104,11 @@ See also: This function is called whenever React Router catches an error in your application on the client. ```tsx -import { type ClientOnErrorFunction } from "react-router"; +import { + createBrowserRouter, + type ClientOnErrorFunction, +} from "react-router"; +import { RouterProvider } from "react-router/dom"; const onError: ClientOnErrorFunction = ( error, @@ -116,8 +120,12 @@ const onError: ClientOnErrorFunction = ( console.error(error, errorInfo); }; +const router = createBrowserRouter(routes); + function App() { - return ; + return ( + + ); } ``` diff --git a/docs/start/data/route-object.md b/docs/start/data/route-object.md index b55817cbbc..0a9592caef 100644 --- a/docs/start/data/route-object.md +++ b/docs/start/data/route-object.md @@ -240,9 +240,29 @@ createBrowserRouter([ ]); ``` +## `handle` + +Route handle allows apps to add anything to a route match in `useMatches` to create abstractions (like breadcrumbs, etc.). + +```tsx +createBrowserRouter([ + { + path: "/app", + handle: { + breadcrumb: "App", + }, + }, +]); +``` + +See also: + +- [`useMatches`][use-matches] + --- Next: [Data Loading](./data-loading) [loader-params]: https://api.reactrouter.com/v7/interfaces/react-router.LoaderFunctionArgs [middleware]: ../../how-to/middleware +[use-matches]: ../../api/hooks/useMatches diff --git a/docs/start/framework/data-loading.md b/docs/start/framework/data-loading.md index d2f16f27b1..143f5edb32 100644 --- a/docs/start/framework/data-loading.md +++ b/docs/start/framework/data-loading.md @@ -142,7 +142,7 @@ export async function clientLoader({ }: Route.ClientLoaderArgs) { const res = await fetch(`/api/products/${params.pid}`); const serverData = await serverLoader(); - return { ...serverData, ...res.json() }; + return { ...serverData, ...(await res.json()) }; } export default function Product({ diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx index 96c28284e6..8ebf3c063f 100644 --- a/packages/react-router/lib/components.tsx +++ b/packages/react-router/lib/components.tsx @@ -398,7 +398,7 @@ export interface RouterProviderProps { * and is only present for render errors. * * ```tsx - * { + * { * let { location, params, pattern, errorInfo } = info; * console.error(error, location, errorInfo); * reportToErrorService(error, location, errorInfo); diff --git a/packages/react-router/lib/dom-export/hydrated-router.tsx b/packages/react-router/lib/dom-export/hydrated-router.tsx index a85a5e6c55..9183feb344 100644 --- a/packages/react-router/lib/dom-export/hydrated-router.tsx +++ b/packages/react-router/lib/dom-export/hydrated-router.tsx @@ -303,7 +303,7 @@ export interface HydratedRouterProps { * and is only present for render errors. * * ```tsx - * { + * { * let { location, params, pattern, errorInfo } = info; * console.error(error, location, errorInfo); * reportToErrorService(error, location, errorInfo);