Merge branch 'release-next'

brophdawg11 · brophdawg11 · commit cc9a5c41c27c · 2023-01-09T13:22:06.000-05:00
diff --git a/contributors.yml b/contributors.yml
@@ -75,6 +75,7 @@
 - JakubDrozd
 - janpaepke
 - jasonpaulos
+- JesusTheHun
 - jimniels
 - jmargeta
 - johnpangalos
diff --git a/packages/react-router-dom-v5-compat/CHANGELOG.md b/packages/react-router-dom-v5-compat/CHANGELOG.md
@@ -1,5 +1,13 @@
 # `react-router-dom-v5-compat`
 
+## 6.6.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.6.2`
+  - `react-router-dom@6.6.2`
+
 ## 6.6.1
 
 ### Patch Changes
diff --git a/packages/react-router-dom-v5-compat/package.json b/packages/react-router-dom-v5-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.6.1",
+  "version": "6.6.2",
   "description": "Migration path to React Router v6 from v4/5",
   "keywords": [
     "react",
@@ -24,7 +24,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "history": "^5.3.0",
-    "react-router": "6.6.1"
+    "react-router": "6.6.2"
   },
   "peerDependencies": {
     "react": ">=16.8",
diff --git a/packages/react-router-dom/CHANGELOG.md b/packages/react-router-dom/CHANGELOG.md
@@ -1,5 +1,13 @@
 # `react-router-dom`
 
+## 6.6.2
+
+### Patch Changes
+
+- Ensure `useId` consistency during SSR ([#9805](https://github.com/remix-run/react-router/pull/9805))
+- Updated dependencies:
+  - `react-router@6.6.2`
+
 ## 6.6.1
 
 ### Patch Changes
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
@@ -178,7 +178,6 @@ export {
 export {
   UNSAFE_DataRouterContext,
   UNSAFE_DataRouterStateContext,
-  UNSAFE_DataStaticRouterContext,
   UNSAFE_NavigationContext,
   UNSAFE_LocationContext,
   UNSAFE_RouteContext,
diff --git a/packages/react-router-dom/package.json b/packages/react-router-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom",
-  "version": "6.6.1",
+  "version": "6.6.2",
   "description": "Declarative routing for React web applications",
   "keywords": [
     "react",
@@ -24,7 +24,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@remix-run/router": "1.2.1",
-    "react-router": "6.6.1"
+    "react-router": "6.6.2"
   },
   "devDependencies": {
     "react": "^18.2.0",
diff --git a/packages/react-router-dom/server.tsx b/packages/react-router-dom/server.tsx
@@ -27,7 +27,6 @@ import {
   Router,
   UNSAFE_DataRouterContext as DataRouterContext,
   UNSAFE_DataRouterStateContext as DataRouterStateContext,
-  UNSAFE_DataStaticRouterContext as DataStaticRouterContext,
   UNSAFE_enhanceManualRouteObjects as enhanceManualRouteObjects,
 } from "react-router-dom";
 
@@ -98,6 +97,7 @@ export function StaticRouterProvider({
     router,
     navigator: getStatelessNavigator(),
     static: true,
+    staticContext: context,
     basename: context.basename || "/",
   };
 
@@ -119,22 +119,18 @@ export function StaticRouterProvider({
 
   return (
     <>
-      <DataStaticRouterContext.Provider value={context}>
-        <DataRouterContext.Provider value={dataRouterContext}>
-          <DataRouterStateContext.Provider
-            value={dataRouterContext.router.state}
+      <DataRouterContext.Provider value={dataRouterContext}>
+        <DataRouterStateContext.Provider value={dataRouterContext.router.state}>
+          <Router
+            basename={dataRouterContext.basename}
+            location={dataRouterContext.router.state.location}
+            navigationType={dataRouterContext.router.state.historyAction}
+            navigator={dataRouterContext.navigator}
           >
-            <Router
-              basename={dataRouterContext.basename}
-              location={dataRouterContext.router.state.location}
-              navigationType={dataRouterContext.router.state.historyAction}
-              navigator={dataRouterContext.navigator}
-            >
-              <Routes />
-            </Router>
-          </DataRouterStateContext.Provider>
-        </DataRouterContext.Provider>
-      </DataStaticRouterContext.Provider>
+            <Routes />
+          </Router>
+        </DataRouterStateContext.Provider>
+      </DataRouterContext.Provider>
       {hydrateScript ? (
         <script
           suppressHydrationWarning
diff --git a/packages/react-router-native/CHANGELOG.md b/packages/react-router-native/CHANGELOG.md
@@ -1,5 +1,12 @@
 # `react-router-native`
 
+## 6.6.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.6.2`
+
 ## 6.6.1
 
 ### Patch Changes
diff --git a/packages/react-router-native/index.tsx b/packages/react-router-native/index.tsx
@@ -125,7 +125,6 @@ export {
 export {
   UNSAFE_DataRouterContext,
   UNSAFE_DataRouterStateContext,
-  UNSAFE_DataStaticRouterContext,
   UNSAFE_NavigationContext,
   UNSAFE_LocationContext,
   UNSAFE_RouteContext,
diff --git a/packages/react-router-native/package.json b/packages/react-router-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-native",
-  "version": "6.6.1",
+  "version": "6.6.2",
   "description": "Declarative routing for React Native applications",
   "keywords": [
     "react",
@@ -22,7 +22,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@ungap/url-search-params": "^0.1.4",
-    "react-router": "6.6.1"
+    "react-router": "6.6.2"
   },
   "devDependencies": {
     "react": "^18.2.0",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/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
diff --git a/packages/react-router/__tests__/useNavigate-test.tsx b/packages/react-router/__tests__/useNavigate-test.tsx
@@ -164,6 +164,63 @@ describe("useNavigate", () => {
     `);
   });
 
+  it("navigates to the new location with empty query string when no query string is provided", () => {
+    function Home() {
+      let location = useLocation();
+      let navigate = useNavigate();
+
+      return (
+        <>
+          <p>{location.pathname + location.search}</p>
+          <button onClick={() => navigate("/home")}>click me</button>
+        </>
+      );
+    }
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <MemoryRouter initialEntries={["/home?key=value"]}>
+          <Routes>
+            <Route path="home" element={<Home />} />
+          </Routes>
+        </MemoryRouter>
+      );
+    });
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      Array [
+        <p>
+          /home?key=value
+        </p>,
+        <button
+          onClick={[Function]}
+        >
+          click me
+        </button>,
+      ]
+    `);
+
+    let button = renderer.root.findByType("button");
+
+    TestRenderer.act(() => {
+      button.props.onClick();
+    });
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      Array [
+        <p>
+          /home
+        </p>,
+        <button
+          onClick={[Function]}
+        >
+          click me
+        </button>,
+      ]
+    `);
+  });
+
   it("throws on invalid destination path objects", () => {
     function Home() {
       let navigate = useNavigate();
diff --git a/packages/react-router/index.ts b/packages/react-router/index.ts
@@ -76,7 +76,6 @@ import type {
 import {
   DataRouterContext,
   DataRouterStateContext,
-  DataStaticRouterContext,
   LocationContext,
   NavigationContext,
   RouteContext,
@@ -239,6 +238,5 @@ export {
   RouteContext as UNSAFE_RouteContext,
   DataRouterContext as UNSAFE_DataRouterContext,
   DataRouterStateContext as UNSAFE_DataRouterStateContext,
-  DataStaticRouterContext as UNSAFE_DataStaticRouterContext,
   enhanceManualRouteObjects as UNSAFE_enhanceManualRouteObjects,
 };
diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx
@@ -87,27 +87,36 @@ export function RouterProvider({
 
   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 (
-    <DataRouterContext.Provider
-      value={{
-        router,
-        navigator,
-        static: false,
-        // Do we need this?
-        basename,
-      }}
-    >
-      <DataRouterStateContext.Provider value={state}>
-        <Router
-          basename={router.basename}
-          location={router.state.location}
-          navigationType={router.state.historyAction}
-          navigator={navigator}
-        >
-          {router.state.initialized ? <Routes /> : fallbackElement}
-        </Router>
-      </DataRouterStateContext.Provider>
-    </DataRouterContext.Provider>
+    <>
+      <DataRouterContext.Provider
+        value={{
+          router,
+          navigator,
+          static: false,
+          // Do we need this?
+          basename,
+        }}
+      >
+        <DataRouterStateContext.Provider value={state}>
+          <Router
+            basename={router.basename}
+            location={router.state.location}
+            navigationType={router.state.historyAction}
+            navigator={navigator}
+          >
+            {router.state.initialized ? <Routes /> : fallbackElement}
+          </Router>
+        </DataRouterStateContext.Provider>
+      </DataRouterContext.Provider>
+      {null}
+    </>
   );
 }
 
diff --git a/packages/react-router/lib/context.ts b/packages/react-router/lib/context.ts
@@ -58,15 +58,9 @@ export interface RouteMatch<
 
 export interface DataRouteMatch extends RouteMatch<string, DataRouteObject> {}
 
-// Contexts for data routers
-export const DataStaticRouterContext =
-  React.createContext<StaticHandlerContext | null>(null);
-if (__DEV__) {
-  DataStaticRouterContext.displayName = "DataStaticRouterContext";
-}
-
 export interface DataRouterContextObject extends NavigationContextObject {
   router: Router;
+  staticContext?: StaticHandlerContext;
 }
 
 export const DataRouterContext =
diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx
@@ -38,7 +38,6 @@ import {
   RouteContext,
   RouteErrorContext,
   AwaitContext,
-  DataStaticRouterContext,
 } from "./context";
 
 /**
@@ -564,12 +563,17 @@ interface RenderedRouteProps {
 }
 
 function RenderedRoute({ routeContext, match, children }: RenderedRouteProps) {
-  let dataStaticRouterContext = React.useContext(DataStaticRouterContext);
+  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 (
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router",
-  "version": "6.6.1",
+  "version": "6.6.2",
   "description": "Declarative routing for React",
   "keywords": [
     "react",
