react-router 6.6.1 → 6.6.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # `react-router`
 
+## 6.6.2
+
+### Patch Changes
+
+- Ensure `useId` consistency during SSR ([#9805](https://github.com/remix-run/react-router/pull/9805))
+
+## 6.6.2-pre.0
+
+### Patch Changes
+
+- Ensure `useId` consistency during SSR ([#9805](https://github.com/remix-run/react-router/pull/9805))
+
 ## 6.6.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { AbortedDeferredError, Action as NavigationType, createPath, defer, gene
 import type { AwaitProps, MemoryRouterProps, NavigateProps, OutletProps, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, RoutesProps, RouterProviderProps } from "./lib/components";
 import { enhanceManualRouteObjects, createRoutesFromChildren, renderMatches, Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes } from "./lib/components";
 import type { DataRouteMatch, DataRouteObject, IndexRouteObject, Navigator, NavigateOptions, NonIndexRouteObject, RouteMatch, RouteObject, RelativeRoutingType } from "./lib/context";
-import { DataRouterContext, DataRouterStateContext, DataStaticRouterContext, LocationContext, NavigationContext, RouteContext } from "./lib/context";
+import { DataRouterContext, DataRouterStateContext, LocationContext, NavigationContext, RouteContext } from "./lib/context";
 import type { NavigateFunction } from "./lib/hooks";
 import { useHref, useInRouterContext, useLocation, useMatch, useNavigationType, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useActionData, useAsyncError, useAsyncValue, useLoaderData, useMatches, useNavigation, useRevalidator, useRouteError, useRouteLoaderData } from "./lib/hooks";
 declare type Hash = string;
@@ -18,4 +18,4 @@ export declare function createMemoryRouter(routes: RouteObject[], opts?: {
     initialIndex?: number;
 }): RemixRouter;
 /** @internal */
-export { NavigationContext as UNSAFE_NavigationContext, LocationContext as UNSAFE_LocationContext, RouteContext as UNSAFE_RouteContext, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, DataStaticRouterContext as UNSAFE_DataStaticRouterContext, enhanceManualRouteObjects as UNSAFE_enhanceManualRouteObjects, };
+export { NavigationContext as UNSAFE_NavigationContext, LocationContext as UNSAFE_LocationContext, RouteContext as UNSAFE_RouteContext, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, enhanceManualRouteObjects as UNSAFE_enhanceManualRouteObjects, };

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.6.1
+ * React Router v6.6.2
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -207,13 +207,6 @@ const isServerEnvironment = !canUseDOM;
 const shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore$2;
 const useSyncExternalStore = "useSyncExternalStore" in React ? (module => module.useSyncExternalStore)(React) : shim;
 
-// Contexts for data routers
-const DataStaticRouterContext = /*#__PURE__*/React.createContext(null);
-
-if (process.env.NODE_ENV !== "production") {
-  DataStaticRouterContext.displayName = "DataStaticRouterContext";
-}
-
 const DataRouterContext = /*#__PURE__*/React.createContext(null);
 
 if (process.env.NODE_ENV !== "production") {
@@ -660,11 +653,11 @@ function RenderedRoute(_ref) {
     match,
     children
   } = _ref;
-  let dataStaticRouterContext = React.useContext(DataStaticRouterContext); // Track how deep we got in our render pass to emulate SSR componentDidCatch
+  let dataRouterContext = React.useContext(DataRouterContext); // Track how deep we got in our render pass to emulate SSR componentDidCatch
   // in a DataStaticRouter
 
-  if (dataStaticRouterContext && match.route.errorElement) {
-    dataStaticRouterContext._deepestRenderedBoundaryId = match.route.id;
+  if (dataRouterContext && dataRouterContext.static && dataRouterContext.staticContext && match.route.errorElement) {
+    dataRouterContext.staticContext._deepestRenderedBoundaryId = match.route.id;
   }
 
   return /*#__PURE__*/React.createElement(RouteContext.Provider, {
@@ -930,8 +923,14 @@ function RouterProvider(_ref) {
       })
     };
   }, [router]);
-  let basename = router.basename || "/";
-  return /*#__PURE__*/React.createElement(DataRouterContext.Provider, {
+  let basename = router.basename || "/"; // The fragment and {null} here are important!  We need them to keep React 18's
+  // useId happy when we are server-rendering since we may have a <script> here
+  // containing the hydrated server-side staticContext (from StaticRouterProvider).
+  // useId relies on the component tree structure to generate deterministic id's
+  // so we need to ensure it remains the same on the client even though
+  // we don't need the <script> tag
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DataRouterContext.Provider, {
     value: {
       router,
       navigator,
@@ -946,7 +945,7 @@ function RouterProvider(_ref) {
     location: router.state.location,
     navigationType: router.state.historyAction,
     navigator: navigator
-  }, router.state.initialized ? /*#__PURE__*/React.createElement(Routes, null) : fallbackElement)));
+  }, router.state.initialized ? /*#__PURE__*/React.createElement(Routes, null) : fallbackElement))), null);
 }
 
 /**
@@ -1370,5 +1369,5 @@ function createMemoryRouter(routes, opts) {
   }).initialize();
 } ///////////////////////////////////////////////////////////////////////////////
 
-export { Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, DataStaticRouterContext as UNSAFE_DataStaticRouterContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, enhanceManualRouteObjects as UNSAFE_enhanceManualRouteObjects, createMemoryRouter, createRoutesFromChildren, createRoutesFromChildren as createRoutesFromElements, renderMatches, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
+export { Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, enhanceManualRouteObjects as UNSAFE_enhanceManualRouteObjects, createMemoryRouter, createRoutesFromChildren, createRoutesFromChildren as createRoutesFromElements, renderMatches, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
 //# sourceMappingURL=index.js.map