[pull] main from remix-run:main

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

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)

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`
 

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
-<RouterProvider onError=(error, info) => {
+<RouterProvider onError={(error, info) => {
   let { location, params, pattern, errorInfo } = info;
   console.error(error, location, errorInfo);
   reportToErrorService(error, location, errorInfo);

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
-<HydratedRouter onError=(error, info) => {
+<HydratedRouter onError={(error, info) => {
   let { location, params, pattern, errorInfo } = info;
   console.error(error, location, errorInfo);
   reportToErrorService(error, location, errorInfo);

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()`:
 

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 <RouterProvider onError={onError} />;
+  return (
+    <RouterProvider router={router} onError={onError} />
+  );
 }
 ```
 

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

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({

packages/react-router/lib/components.tsx

@@ -398,7 +398,7 @@ export interface RouterProviderProps {
    * and is only present for render errors.
    *
    * ```tsx
-   * <RouterProvider onError=(error, info) => {
+   * <RouterProvider onError={(error, info) => {
    *   let { location, params, pattern, errorInfo } = info;
    *   console.error(error, location, errorInfo);
    *   reportToErrorService(error, location, errorInfo);

packages/react-router/lib/dom-export/hydrated-router.tsx

@@ -303,7 +303,7 @@ export interface HydratedRouterProps {
    * and is only present for render errors.
    *
    * ```tsx
-   * <HydratedRouter onError=(error, info) => {
+   * <HydratedRouter onError={(error, info) => {
    *   let { location, params, pattern, errorInfo } = info;
    *   console.error(error, location, errorInfo);
    *   reportToErrorService(error, location, errorInfo);