react-router-dom 6.8.2 → 6.9.0

package/CHANGELOG.md

@@ -1,5 +1,109 @@
 # `react-router-dom`
 
+## 6.9.0
+
+### Minor Changes
+
+- React Router now supports an alternative way to define your route `element` and `errorElement` fields as React Components instead of React Elements. You can instead pass a React Component to the new `Component` and `ErrorBoundary` fields if you choose. There is no functional difference between the two, so use whichever approach you prefer 😀. You shouldn't be defining both, but if you do `Component`/`ErrorBoundary` will "win". ([#10045](https://github.com/remix-run/react-router/pull/10045))
+
+  **Example JSON Syntax**
+
+  ```jsx
+  // Both of these work the same:
+  const elementRoutes = [{
+    path: '/',
+    element: <Home />,
+    errorElement: <HomeError />,
+  }]
+
+  const componentRoutes = [{
+    path: '/',
+    Component: Home,
+    ErrorBoundary: HomeError,
+  }]
+
+  function Home() { ... }
+  function HomeError() { ... }
+  ```
+
+  **Example JSX Syntax**
+
+  ```jsx
+  // Both of these work the same:
+  const elementRoutes = createRoutesFromElements(
+    <Route path='/' element={<Home />} errorElement={<HomeError /> } />
+  );
+
+  const componentRoutes = createRoutesFromElements(
+    <Route path='/' Component={Home} ErrorBoundary={HomeError} />
+  );
+
+  function Home() { ... }
+  function HomeError() { ... }
+  ```
+
+- **Introducing Lazy Route Modules!** ([#10045](https://github.com/remix-run/react-router/pull/10045))
+
+  In order to keep your application bundles small and support code-splitting of your routes, we've introduced a new `lazy()` route property. This is an async function that resolves the non-route-matching portions of your route definition (`loader`, `action`, `element`/`Component`, `errorElement`/`ErrorBoundary`, `shouldRevalidate`, `handle`).
+
+  Lazy routes are resolved on initial load and during the `loading` or `submitting` phase of a navigation or fetcher call. You cannot lazily define route-matching properties (`path`, `index`, `children`) since we only execute your lazy route functions after we've matched known routes.
+
+  Your `lazy` functions will typically return the result of a dynamic import.
+
+  ```jsx
+  // In this example, we assume most folks land on the homepage so we include that
+  // in our critical-path bundle, but then we lazily load modules for /a and /b so
+  // they don't load until the user navigates to those routes
+  let routes = createRoutesFromElements(
+    <Route path="/" element={<Layout />}>
+      <Route index element={<Home />} />
+      <Route path="a" lazy={() => import("./a")} />
+      <Route path="b" lazy={() => import("./b")} />
+    </Route>
+  );
+  ```
+
+  Then in your lazy route modules, export the properties you want defined for the route:
+
+  ```jsx
+  export async function loader({ request }) {
+    let data = await fetchData(request);
+    return json(data);
+  }
+
+  // Export a `Component` directly instead of needing to create a React Element from it
+  export function Component() {
+    let data = useLoaderData();
+
+    return (
+      <>
+        <h1>You made it!</h1>
+        <p>{data}</p>
+      </>
+    );
+  }
+
+  // Export an `ErrorBoundary` directly instead of needing to create a React Element from it
+  export function ErrorBoundary() {
+    let error = useRouteError();
+    return isRouteErrorResponse(error) ? (
+      <h1>
+        {error.status} {error.statusText}
+      </h1>
+    ) : (
+      <h1>{error.message || error}</h1>
+    );
+  }
+  ```
+
+  An example of this in action can be found in the [`examples/lazy-loading-router-provider`](https://github.com/remix-run/react-router/tree/main/examples/lazy-loading-router-provider) directory of the repository.
+
+  🙌 Huge thanks to @rossipedia for the [Initial Proposal](https://github.com/remix-run/react-router/discussions/9826) and [POC Implementation](https://github.com/remix-run/react-router/pull/9830).
+
+- Updated dependencies:
+  - `react-router@6.9.0`
+  - `@remix-run/router@1.4.0`
+
 ## 6.8.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -9,10 +9,10 @@ import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit } from "./do
 import { createSearchParams } from "./dom";
 export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, };
 export { createSearchParams };
-export type { ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To, } from "react-router";
+export type { ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LazyRouteFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To, } from "react-router";
 export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, unstable_useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
 /** @internal */
-export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_enhanceManualRouteObjects, } from "react-router";
+export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, } from "react-router";
 declare global {
     var __staticRouterHydrationData: HydrationState | undefined;
 }
@@ -221,6 +221,7 @@ declare function useScrollRestoration({ getKey, storageKey, }?: {
     getKey?: GetScrollRestorationKeyFunction;
     storageKey?: string;
 }): void;
+export { useScrollRestoration as UNSAFE_useScrollRestoration };
 /**
  * Setup a callback to be fired on the window's `beforeunload` event. This is
  * useful for saving some data to `window.localStorage` just before the page
@@ -245,4 +246,3 @@ declare function usePrompt({ when, message }: {
     message: string;
 }): void;
 export { usePrompt as unstable_usePrompt };
-export { useScrollRestoration as UNSAFE_useScrollRestoration };

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v6.8.2
+ * React Router DOM v6.9.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,9 +9,9 @@
  * @license MIT
  */
 import * as React from 'react';
-import { UNSAFE_enhanceManualRouteObjects, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_DataRouterContext } from 'react-router';
-export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_enhanceManualRouteObjects, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
-import { createRouter, createBrowserHistory, createHashHistory, ErrorResponse, stripBasename, UNSAFE_invariant, joinPaths } from '@remix-run/router';
+import { UNSAFE_detectErrorBoundary, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_DataRouterContext } from 'react-router';
+export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
+import { createRouter, createBrowserHistory, createHashHistory, ErrorResponse, stripBasename, UNSAFE_warning, UNSAFE_invariant, joinPaths } from '@remix-run/router';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -200,7 +200,8 @@ function createBrowserRouter(routes, opts) {
       window: opts == null ? void 0 : opts.window
     }),
     hydrationData: (opts == null ? void 0 : opts.hydrationData) || parseHydrationData(),
-    routes: UNSAFE_enhanceManualRouteObjects(routes)
+    routes,
+    detectErrorBoundary: UNSAFE_detectErrorBoundary
   }).initialize();
 }
 function createHashRouter(routes, opts) {
@@ -210,7 +211,8 @@ function createHashRouter(routes, opts) {
       window: opts == null ? void 0 : opts.window
     }),
     hydrationData: (opts == null ? void 0 : opts.hydrationData) || parseHydrationData(),
-    routes: UNSAFE_enhanceManualRouteObjects(routes)
+    routes,
+    detectErrorBoundary: UNSAFE_detectErrorBoundary
   }).initialize();
 }
 
@@ -661,7 +663,7 @@ function useLinkClickHandler(to, _temp) {
  */
 
 function useSearchParams(defaultInit) {
-  process.env.NODE_ENV !== "production" ? warning(typeof URLSearchParams !== "undefined", "You cannot use the `useSearchParams` hook in a browser that does not " + "support the URLSearchParams API. If you need to support Internet " + "Explorer 11, we recommend you load a polyfill such as " + "https://github.com/ungap/url-search-params\n\n" + "If you're unsure how to load polyfills, we recommend you check out " + "https://polyfill.io/v3/ which provides some recommendations about how " + "to load polyfills only for users that need them, instead of for every " + "user.") : void 0;
+  process.env.NODE_ENV !== "production" ? UNSAFE_warning(typeof URLSearchParams !== "undefined", "You cannot use the `useSearchParams` hook in a browser that does not " + "support the URLSearchParams API. If you need to support Internet " + "Explorer 11, we recommend you load a polyfill such as " + "https://github.com/ungap/url-search-params\n\n" + "If you're unsure how to load polyfills, we recommend you check out " + "https://polyfill.io/v3/ which provides some recommendations about how " + "to load polyfills only for users that need them, instead of for every " + "user.") : void 0;
   let defaultSearchParamsRef = React.useRef(createSearchParams(defaultInit));
   let hasSetSearchParamsRef = React.useRef(false);
   let location = useLocation();
@@ -951,7 +953,6 @@ function useScrollRestoration(_temp3) {
  * `React.useCallback()`.
  */
 
-
 function useBeforeUnload(callback, options) {
   let {
     capture
@@ -1022,25 +1023,7 @@ function usePrompt(_ref8) {
     }
   }, [blocker, message]);
 }
-////////////////////////////////////////////////////////////////////////////////
-//#region Utils
-////////////////////////////////////////////////////////////////////////////////
-
-function warning(cond, message) {
-  if (!cond) {
-    // eslint-disable-next-line no-console
-    if (typeof console !== "undefined") console.warn(message);
-
-    try {
-      // Welcome to debugging React Router!
-      //
-      // This error is thrown as a convenience so you can more easily
-      // find the source for a warning that appears in the console by
-      // enabling "pause on exceptions" in your JavaScript debugger.
-      throw new Error(message); // eslint-disable-next-line no-empty
-    } catch (e) {}
-  }
-} //#endregion
+ //#endregion
 
 export { BrowserRouter, Form, HashRouter, Link, NavLink, ScrollRestoration, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit };
 //# sourceMappingURL=index.js.map