Fix useNAvigate when called from <Routes> inside a <RouterProvider> (#…

…10432)
remix-run · May 2, 2023 · 5e195ec · 5e195ec
1 parent 290d9e7
commit 5e195ec
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 4 deletions.
diff --git a/.changeset/navigate-from-routes.md b/.changeset/navigate-from-routes.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix bug when calling `useNavigate` from `<Routes>` inside a `<RouterProvider>`
diff --git a/packages/react-router/__tests__/useNavigate-test.tsx b/packages/react-router/__tests__/useNavigate-test.tsx
@@ -7,6 +7,7 @@ import {
   Route,
   useNavigate,
   useLocation,
+  useRoutes,
   createMemoryRouter,
   createRoutesFromElements,
   Outlet,
@@ -301,6 +302,178 @@ describe("useNavigate", () => {
     );
   });
 
+  it("allows useNavigate usage in a mixed RouterProvider/<Routes> scenario", () => {
+    const router = createMemoryRouter([
+      {
+        path: "/*",
+        Component() {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          let navigate = useNavigate();
+          let location = useLocation();
+          return (
+            <>
+              <button
+                onClick={() =>
+                  navigate(location.pathname === "/" ? "/page" : "/")
+                }
+              >
+                Navigate from RouterProvider
+              </button>
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/page" element={<Page />} />
+              </Routes>
+            </>
+          );
+        },
+      },
+    ]);
+
+    function Home() {
+      let navigate = useNavigate();
+      return (
+        <>
+          <h1>Home</h1>
+          <button onClick={() => navigate("/page")}>
+            Navigate /page from Routes
+          </button>
+        </>
+      );
+    }
+
+    function Page() {
+      let navigate = useNavigate();
+      return (
+        <>
+          <h1>Page</h1>
+          <button onClick={() => navigate("/")}>
+            Navigate /home from Routes
+          </button>
+        </>
+      );
+    }
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(<RouterProvider router={router} />);
+    });
+
+    expect(router.state.location.pathname).toBe("/");
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      [
+        <button
+          onClick={[Function]}
+        >
+          Navigate from RouterProvider
+        </button>,
+        <h1>
+          Home
+        </h1>,
+        <button
+          onClick={[Function]}
+        >
+          Navigate /page from Routes
+        </button>,
+      ]
+    `);
+
+    let button = renderer.root.findByProps({
+      children: "Navigate from RouterProvider",
+    });
+    TestRenderer.act(() => button.props.onClick());
+
+    expect(router.state.location.pathname).toBe("/page");
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      [
+        <button
+          onClick={[Function]}
+        >
+          Navigate from RouterProvider
+        </button>,
+        <h1>
+          Page
+        </h1>,
+        <button
+          onClick={[Function]}
+        >
+          Navigate /home from Routes
+        </button>,
+      ]
+    `);
+
+    button = renderer.root.findByProps({
+      children: "Navigate from RouterProvider",
+    });
+    TestRenderer.act(() => button.props.onClick());
+
+    expect(router.state.location.pathname).toBe("/");
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      [
+        <button
+          onClick={[Function]}
+        >
+          Navigate from RouterProvider
+        </button>,
+        <h1>
+          Home
+        </h1>,
+        <button
+          onClick={[Function]}
+        >
+          Navigate /page from Routes
+        </button>,
+      ]
+    `);
+
+    button = renderer.root.findByProps({
+      children: "Navigate /page from Routes",
+    });
+    TestRenderer.act(() => button.props.onClick());
+
+    expect(router.state.location.pathname).toBe("/page");
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      [
+        <button
+          onClick={[Function]}
+        >
+          Navigate from RouterProvider
+        </button>,
+        <h1>
+          Page
+        </h1>,
+        <button
+          onClick={[Function]}
+        >
+          Navigate /home from Routes
+        </button>,
+      ]
+    `);
+
+    button = renderer.root.findByProps({
+      children: "Navigate /home from Routes",
+    });
+    TestRenderer.act(() => button.props.onClick());
+
+    expect(router.state.location.pathname).toBe("/");
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      [
+        <button
+          onClick={[Function]}
+        >
+          Navigate from RouterProvider
+        </button>,
+        <h1>
+          Home
+        </h1>,
+        <button
+          onClick={[Function]}
+        >
+          Navigate /page from Routes
+        </button>,
+      ]
+    `);
+  });
+
   describe("navigating in effects versus render", () => {
     let warnSpy: jest.SpyInstance;
 

diff --git a/packages/react-router/lib/context.ts b/packages/react-router/lib/context.ts
@@ -144,11 +144,13 @@ if (__DEV__) {
 export interface RouteContextObject {
   outlet: React.ReactElement | null;
   matches: RouteMatch[];
+  isDataRoute: boolean;
 }
 
 export const RouteContext = React.createContext<RouteContextObject>({
   outlet: null,
   matches: [],
+  isDataRoute: false,
 });
 
 if (__DEV__) {

diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx
@@ -174,10 +174,10 @@ function useIsomorphicLayoutEffect(
  * @see https://reactrouter.com/hooks/use-navigate
  */
 export function useNavigate(): NavigateFunction {
-  let isDataRouter = React.useContext(DataRouterContext) != null;
+  let { isDataRoute } = React.useContext(RouteContext);
   // Conditional usage is OK here because the usage of a data router is static
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  return isDataRouter ? useNavigateStable() : useNavigateUnstable();
+  return isDataRoute ? useNavigateStable() : useNavigateUnstable();
 }
 
 function useNavigateUnstable(): NavigateFunction {
@@ -705,7 +705,11 @@ export function _renderMatches(
       return (
         <RenderedRoute
           match={match}
-          routeContext={{ outlet, matches }}
+          routeContext={{
+            outlet,
+            matches,
+            isDataRoute: dataRouterState != null,
+          }}
           children={children}
         />
       );
@@ -721,7 +725,7 @@ export function _renderMatches(
         component={errorElement}
         error={error}
         children={getChildren()}
-        routeContext={{ outlet: null, matches }}
+        routeContext={{ outlet: null, matches, isDataRoute: true }}
       />
     ) : (
       getChildren()