react-router 6.3.0 → 6.4.0-pre.3

package/__tests__/useHref-basename-test.tsx

@@ -0,0 +1,351 @@
+import * as React from "react";
+import * as TestRenderer from "react-test-renderer";
+import { MemoryRouter, Routes, Route, useHref } from "react-router";
+
+function ShowHref({ to }: { to: string }) {
+  return <p>{useHref(to)}</p>;
+}
+
+describe("useHref under a basename", () => {
+  describe("to an absolute route", () => {
+    it("returns the correct href", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
+            <Routes>
+              <Route path="admin" element={<ShowHref to="/invoices" />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <p>
+          /app/invoices
+        </p>
+      `);
+    });
+  });
+
+  describe("to a child route", () => {
+    it("returns the correct href", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
+            <Routes>
+              <Route path="admin" element={<ShowHref to="invoices" />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <p>
+          /app/admin/invoices
+        </p>
+      `);
+    });
+
+    describe("when the URL has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter basename="/app" initialEntries={["/app/admin/"]}>
+              <Routes>
+                <Route path="admin" element={<ShowHref to="invoices" />} />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <p>
+            /app/admin/invoices
+          </p>
+        `);
+      });
+    });
+
+    describe("when the href has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
+              <Routes>
+                <Route path="admin" element={<ShowHref to="invoices/" />} />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <p>
+            /app/admin/invoices/
+          </p>
+        `);
+      });
+    });
+  });
+
+  describe("to a sibling route", () => {
+    it("returns the correct href", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
+            <Routes>
+              <Route path="admin" element={<ShowHref to="../dashboard" />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <p>
+          /app/dashboard
+        </p>
+      `);
+    });
+
+    describe("when the URL has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter basename="/app" initialEntries={["/app/admin/"]}>
+              <Routes>
+                <Route path="admin" element={<ShowHref to="../dashboard" />} />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <p>
+            /app/dashboard
+          </p>
+        `);
+      });
+    });
+
+    describe("when the href has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
+              <Routes>
+                <Route path="admin" element={<ShowHref to="../dashboard/" />} />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <p>
+            /app/dashboard/
+          </p>
+        `);
+      });
+    });
+  });
+
+  describe("to a parent route", () => {
+    it("returns the correct href", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
+            <Routes>
+              <Route path="admin" element={<ShowHref to=".." />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <p>
+          /app
+        </p>
+      `);
+    });
+
+    describe("when the URL has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter basename="/app" initialEntries={["/app/admin/"]}>
+              <Routes>
+                <Route path="admin" element={<ShowHref to=".." />} />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <p>
+            /app
+          </p>
+        `);
+      });
+    });
+
+    describe("when the href has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
+              <Routes>
+                <Route path="admin" element={<ShowHref to="../" />} />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <p>
+            /app/
+          </p>
+        `);
+      });
+    });
+  });
+
+  describe("with a to value that has more .. segments than the current URL", () => {
+    it("returns the correct href", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
+            <Routes>
+              <Route
+                path="admin"
+                element={<ShowHref to="../../../dashboard" />}
+              />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      // This is correct because the basename works like a chroot "jail".
+      // Relative <Link to> values cannot "escape" into a higher level URL since
+      // they would be linking to a URL that the <Router> cannot render. To link
+      // to a higher URL path, use a plain <a>.
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <p>
+          /app/dashboard
+        </p>
+      `);
+    });
+
+    describe("and no additional segments", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
+              <Routes>
+                <Route path="admin" element={<ShowHref to="../../.." />} />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        // This is correct because the basename works like a chroot "jail".
+        // Relative <Link to> values cannot "escape" into a higher level URL
+        // since they would be linking to a URL that the <Router> cannot render.
+        // To link to a higher URL path, use a plain <a>.
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <p>
+            /app
+          </p>
+        `);
+      });
+    });
+
+    describe("when the URL has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter basename="/app" initialEntries={["/app/admin/"]}>
+              <Routes>
+                <Route
+                  path="admin"
+                  element={<ShowHref to="../../../dashboard" />}
+                />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        // This is correct because the basename works like a chroot "jail".
+        // Relative <Link to> values cannot "escape" into a higher level URL
+        // since they would be linking to a URL that the <Router> cannot render.
+        // To link to a higher URL path, use a plain <a>.
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <p>
+            /app/dashboard
+          </p>
+        `);
+      });
+    });
+
+    describe("when the href has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
+              <Routes>
+                <Route
+                  path="admin"
+                  element={<ShowHref to="../../../dashboard/" />}
+                />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <p>
+            /app/dashboard/
+          </p>
+        `);
+      });
+    });
+  });
+
+  describe("after an update", () => {
+    it("does not change", () => {
+      let element = (
+        <MemoryRouter basename="/app" initialEntries={["/app/admin"]}>
+          <Routes>
+            <Route path="admin" element={<ShowHref to="/invoices" />} />
+          </Routes>
+        </MemoryRouter>
+      );
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(element);
+      });
+
+      TestRenderer.act(() => {
+        renderer.update(element);
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <p>
+          /app/invoices
+        </p>
+      `);
+    });
+  });
+});

package/__tests__/useHref-test.tsx

@@ -0,0 +1,287 @@
+import * as React from "react";
+import * as TestRenderer from "react-test-renderer";
+import { MemoryRouter, Routes, Route, useHref } from "react-router";
+
+function ShowHref({ to }: { to: string }) {
+  return <pre>{useHref(to)}</pre>;
+}
+
+describe("useHref", () => {
+  describe("to a child route", () => {
+    it("returns the correct href", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/courses"]}>
+            <Routes>
+              <Route
+                path="courses"
+                element={<ShowHref to="advanced-react" />}
+              />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <pre>
+          /courses/advanced-react
+        </pre>
+      `);
+    });
+
+    describe("when the URL has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter initialEntries={["/courses/"]}>
+              <Routes>
+                <Route
+                  path="courses"
+                  element={<ShowHref to="advanced-react" />}
+                />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <pre>
+            /courses/advanced-react
+          </pre>
+        `);
+      });
+    });
+
+    describe("when the href has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter initialEntries={["/courses"]}>
+              <Routes>
+                <Route
+                  path="courses"
+                  element={<ShowHref to="advanced-react/" />}
+                />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <pre>
+            /courses/advanced-react/
+          </pre>
+        `);
+      });
+    });
+  });
+
+  describe("to a sibling route", () => {
+    it("returns the correct href", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/courses"]}>
+            <Routes>
+              <Route path="courses" element={<ShowHref to="../about" />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <pre>
+          /about
+        </pre>
+      `);
+    });
+
+    describe("when the URL has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter initialEntries={["/courses/"]}>
+              <Routes>
+                <Route path="/courses/" element={<ShowHref to="../about" />} />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <pre>
+            /about
+          </pre>
+        `);
+      });
+    });
+
+    describe("when the href has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter initialEntries={["/courses"]}>
+              <Routes>
+                <Route path="courses" element={<ShowHref to="../about/" />} />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <pre>
+            /about/
+          </pre>
+        `);
+      });
+    });
+  });
+
+  describe("to a parent route", () => {
+    it("returns the correct href", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/courses/advanced-react"]}>
+            <Routes>
+              <Route path="courses">
+                <Route path="advanced-react" element={<ShowHref to=".." />} />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <pre>
+          /courses
+        </pre>
+      `);
+    });
+
+    describe("when the URL has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter initialEntries={["/courses/advanced-react/"]}>
+              <Routes>
+                <Route path="courses">
+                  <Route path="advanced-react" element={<ShowHref to=".." />} />
+                </Route>
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <pre>
+            /courses
+          </pre>
+        `);
+      });
+    });
+
+    describe("when the href has a trailing slash", () => {
+      it("returns the correct href", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter initialEntries={["/courses/advanced-react"]}>
+              <Routes>
+                <Route path="courses">
+                  <Route
+                    path="advanced-react"
+                    element={<ShowHref to="../" />}
+                  />
+                </Route>
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <pre>
+            /courses/
+          </pre>
+        `);
+      });
+    });
+  });
+
+  describe("to an absolute route", () => {
+    it("returns the correct href", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/courses/advanced-react"]}>
+            <Routes>
+              <Route
+                path="courses/advanced-react"
+                element={<ShowHref to="/users" />}
+              />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <pre>
+          /users
+        </pre>
+      `);
+    });
+  });
+
+  describe("with a to value that has more .. segments than are in the URL", () => {
+    it("returns the correct href", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/courses/react-fundamentals"]}>
+            <Routes>
+              <Route path="courses">
+                <Route
+                  path="react-fundamentals"
+                  element={<ShowHref to="../../../courses" />}
+                />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <pre>
+          /courses
+        </pre>
+      `);
+    });
+
+    describe("and no additional segments", () => {
+      it("links to the root /", () => {
+        let renderer: TestRenderer.ReactTestRenderer;
+        TestRenderer.act(() => {
+          renderer = TestRenderer.create(
+            <MemoryRouter initialEntries={["/home"]}>
+              <Routes>
+                <Route path="/home" element={<ShowHref to="../../.." />} />
+              </Routes>
+            </MemoryRouter>
+          );
+        });
+
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <pre>
+            /
+          </pre>
+        `);
+      });
+    });
+  });
+});

package/__tests__/useLocation-test.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as TestRenderer from "react-test-renderer";
+import { MemoryRouter, Routes, Route, useLocation } from "react-router";
+
+function ShowPath() {
+  let { pathname, search, hash } = useLocation();
+  return <pre>{JSON.stringify({ pathname, search, hash })}</pre>;
+}
+
+describe("useLocation", () => {
+  it("returns the current location object", () => {
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <MemoryRouter initialEntries={["/home?the=search#the-hash"]}>
+          <Routes>
+            <Route path="/home" element={<ShowPath />} />
+          </Routes>
+        </MemoryRouter>
+      );
+    });
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <pre>
+        {"pathname":"/home","search":"?the=search","hash":"#the-hash"}
+      </pre>
+    `);
+  });
+});