Fix failing tests, and new test cases to expose regression issues wit…

…h useNavigate

packages/react-router-dom-v5-compat/index.ts

@@ -69,7 +69,7 @@ export type {
   Pathname,
   Search,
   RoutesProps,
-} from "./react-router-dom";
+} from "../react-router-dom";
 export {
   BrowserRouter,
   HashRouter,
@@ -108,7 +108,7 @@ export {
   useResolvedPath,
   useRoutes,
   useSearchParams,
-} from "./react-router-dom";
+} from "../react-router-dom";
 
 export type { StaticRouterProps } from "./lib/components";
 export { CompatRouter, CompatRoute, StaticRouter } from "./lib/components";

packages/react-router-dom-v5-compat/lib/components.tsx

@@ -9,7 +9,7 @@ import { useHistory, Route as RouteV5 } from "react-router-dom";
 // We are a wrapper around react-router-dom v6, so bring it in
 // and bundle it because an app can't have two versions of
 // react-router-dom in its package.json.
-import { Router, Routes, Route } from "../react-router-dom";
+import { Router, Routes, Route } from "../../react-router-dom";
 
 // v5 isn't in TypeScript, they'll also lose the @types/react-router with this
 // but not worried about that for now.

packages/react-router/__tests__/useNavigate-test.tsx

@@ -50,6 +50,77 @@ describe("useNavigate", () => {
     `);
   });
 
+  it("transitions to the new location when called immediately", () => {
+    const Home = React.forwardRef(function Home(_props, ref) {
+      let navigate = useNavigate();
+
+      React.useImperativeHandle(ref, () => ({
+        navigate: () => navigate("/about")
+      }))
+
+      return null
+    })
+
+    let homeRef;
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    renderer = TestRenderer.create(
+      <MemoryRouter initialEntries={["/home"]}>
+        <Routes>
+          <Route path="home" element={<Home ref={(ref) => homeRef = ref} />} />
+          <Route path="about" element={<h1>About</h1>} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    TestRenderer.act(() => {
+      homeRef.navigate();
+    })
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <h1>
+        About
+      </h1>
+    `);
+  });
+
+  it("allows navigation in child useEffects", () => {
+    function Child({ onChildRendered }) {
+
+      React.useEffect(() => {
+        onChildRendered();
+      });
+
+      return null;
+    }
+
+    function Parent() {
+      let navigate = useNavigate();
+
+      let onChildRendered = React.useCallback(() => navigate("/about"), []);
+
+      return <Child onChildRendered={onChildRendered} />;
+    }
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <MemoryRouter initialEntries={["/home"]}>
+          <Routes>
+            <Route path="home" element={<Parent />} />
+            <Route path="about" element={<h1>About</h1>} />
+          </Routes>
+        </MemoryRouter>
+      );
+    });
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <h1>
+        About
+      </h1>
+    `);
+  });
+
   describe("with state", () => {
     it("adds the state to location.state", () => {
       function Home() {
@@ -97,4 +168,6 @@ describe("useNavigate", () => {
       `);
     });
   });
+
+
 });