Fix greedy * in route paths

package.json

@@ -73,7 +73,7 @@
   },
   "filesize": {
     "build/react-router/react-router.production.min.js": {
-      "none": "6 kB"
+      "none": "7 kB"
     },
     "build/react-router/umd/react-router.production.min.js": {
       "none": "8 kB"

packages/react-router/__tests__/greedy-matching-test.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { create as createTestRenderer } from "react-test-renderer";
+import {
+  MemoryRouter as Router,
+  Routes,
+  Route,
+  Outlet
+} from "react-router-dom";
+
+describe("greedy matching", () => {
+  let routes = (
+    <Routes>
+      <Route path="/" element={<p>Root</p>} />
+      <Route
+        path="home"
+        element={
+          <div>
+            Home Layout <Outlet />
+          </div>
+        }
+      >
+        <Route index element={<p>Home</p>} />
+        <Route path="*" element={<p>Home Not Found</p>} />
+      </Route>
+      <Route path="*" element={<p>Not Found</p>} />
+    </Routes>
+  );
+
+  it("matches the root route", () => {
+    let renderer = createTestRenderer(
+      <Router initialEntries={["/"]} children={routes} />
+    );
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <p>
+        Root
+      </p>
+    `);
+  });
+
+  it("matches the index route", () => {
+    let renderer = createTestRenderer(
+      <Router initialEntries={["/home"]} children={routes} />
+    );
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <div>
+        Home Layout 
+        <p>
+          Home
+        </p>
+      </div>
+    `);
+  });
+
+  it('matches the nested "not found" route', () => {
+    let renderer = createTestRenderer(
+      <Router initialEntries={["/home/typo"]} children={routes} />
+    );
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <div>
+        Home Layout 
+        <p>
+          Home Not Found
+        </p>
+      </div>
+    `);
+  });
+
+  it('matches the "not found" route', () => {
+    let renderer = createTestRenderer(
+      <Router initialEntries={["/hometypo"]} children={routes} />
+    );
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <p>
+        Not Found
+      </p>
+    `);
+  });
+});

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

@@ -0,0 +1,205 @@
+import { matchPath } from "react-router";
+
+describe("matchPath", () => {
+  it("matches the root / URL", () => {
+    expect(matchPath("/", "/")).toMatchObject({ pathname: "/" });
+  });
+
+  describe("when the pattern has no leading slash", () => {
+    it("fails to match a pathname that does not match", () => {
+      expect(matchPath("users", "/usersblah")).toBeNull();
+    });
+
+    it("matches a pathname", () => {
+      expect(matchPath("users", "/users")).toMatchObject({
+        pathname: "/users"
+      });
+    });
+
+    it("matches a pathname with multiple segments", () => {
+      expect(matchPath("users/mj", "/users/mj")).toMatchObject({
+        pathname: "/users/mj"
+      });
+    });
+
+    it("matches a pathname with a trailing slash", () => {
+      expect(matchPath("users", "/users/")).toMatchObject({
+        pathname: "/users/"
+      });
+    });
+
+    it("matches a pathname with multiple segments and a trailing slash", () => {
+      expect(matchPath("users/mj", "/users/mj/")).toMatchObject({
+        pathname: "/users/mj/"
+      });
+    });
+  });
+
+  describe("when the pattern has a leading slash", () => {
+    it("fails to match a pathname that does not match", () => {
+      expect(matchPath("/users", "/usersblah")).toBeNull();
+    });
+
+    it("matches a pathname", () => {
+      expect(matchPath("/users", "/users")).toMatchObject({
+        pathname: "/users"
+      });
+    });
+
+    it("matches a pathname with multiple segments", () => {
+      expect(matchPath("/users/mj", "/users/mj")).toMatchObject({
+        pathname: "/users/mj"
+      });
+    });
+
+    it("matches a pathname with a trailing slash", () => {
+      expect(matchPath("/users", "/users/")).toMatchObject({
+        pathname: "/users/"
+      });
+    });
+
+    it("matches a pathname with multiple segments and a trailing slash", () => {
+      expect(matchPath("/users/mj", "/users/mj/")).toMatchObject({
+        pathname: "/users/mj/"
+      });
+    });
+  });
+
+  describe("when the pattern has a trailing slash", () => {
+    it("fails to match a pathname that does not match", () => {
+      expect(matchPath("users/", "/usersblah")).toBeNull();
+    });
+
+    it("matches a pathname", () => {
+      expect(matchPath("users/", "/users")).toMatchObject({
+        pathname: "/users"
+      });
+    });
+
+    it("matches a pathname with multiple segments", () => {
+      expect(matchPath("users/mj/", "/users/mj")).toMatchObject({
+        pathname: "/users/mj"
+      });
+    });
+
+    it("matches a pathname with a trailing slash", () => {
+      expect(matchPath("users/", "/users/")).toMatchObject({
+        pathname: "/users/"
+      });
+    });
+
+    it("matches a pathname with multiple segments and a trailing slash", () => {
+      expect(matchPath("users/mj/", "/users/mj/")).toMatchObject({
+        pathname: "/users/mj/"
+      });
+    });
+  });
+
+  describe("with { end: false }", () => {
+    it("matches the beginning of a pathname", () => {
+      expect(matchPath({ path: "/users", end: false }, "/users")).toMatchObject(
+        { pathname: "/users" }
+      );
+    });
+
+    it("matches the beginning of a pathname with multiple segments", () => {
+      expect(
+        matchPath({ path: "/users", end: false }, "/users/mj")
+      ).toMatchObject({ pathname: "/users" });
+    });
+
+    it("fails to match a pathname where the segments do not match", () => {
+      expect(matchPath({ path: "/users", end: false }, "/")).toBeNull();
+      expect(matchPath({ path: "/users", end: false }, "/users2")).toBeNull();
+      expect(
+        matchPath({ path: "/users/mj", end: false }, "/users/mj2")
+      ).toBeNull();
+    });
+  });
+
+  describe("with { end: false } and a / pattern", () => {
+    it("matches a pathname", () => {
+      expect(matchPath({ path: "/", end: false }, "/users")).toMatchObject({
+        pathname: "/"
+      });
+    });
+
+    it("matches a pathname with multiple segments", () => {
+      expect(matchPath({ path: "/", end: false }, "/users/mj")).toMatchObject({
+        pathname: "/"
+      });
+    });
+
+    it("matches a pathname with a trailing slash", () => {
+      expect(matchPath({ path: "/", end: false }, "/users/")).toMatchObject({
+        pathname: "/"
+      });
+    });
+
+    it("matches a pathname with multiple segments and a trailing slash", () => {
+      expect(matchPath({ path: "/", end: false }, "/users/mj/")).toMatchObject({
+        pathname: "/"
+      });
+    });
+  });
+
+  it("is not case-sensitive by default", () => {
+    expect(matchPath("/SystemDashboard", "/systemdashboard")).toMatchObject({
+      pathname: "/systemdashboard"
+    });
+  });
+
+  it("matches a case-sensitive pathname", () => {
+    expect(
+      matchPath(
+        { path: "/SystemDashboard", caseSensitive: true },
+        "/SystemDashboard"
+      )
+    ).toMatchObject({
+      pathname: "/SystemDashboard"
+    });
+  });
+
+  it("does not match a case-sensitive pathname with the wrong case", () => {
+    expect(
+      matchPath(
+        { path: "/SystemDashboard", caseSensitive: true },
+        "/systemDashboard"
+      )
+    ).toBeNull();
+  });
+
+  describe("when the pattern has a trailing *", () => {
+    it("matches the remaining portion of the pathname", () => {
+      expect(matchPath("/files*", "/files/mj.jpg")).toMatchObject({
+        params: { "*": "/mj.jpg" },
+        pathname: "/files/mj.jpg"
+      });
+      expect(matchPath("/files*", "/files/")).toMatchObject({
+        params: { "*": "/" },
+        pathname: "/files/"
+      });
+      expect(matchPath("/files*", "/files")).toMatchObject({
+        params: { "*": "" },
+        pathname: "/files"
+      });
+    });
+  });
+
+  describe("when the pattern has a trailing /*", () => {
+    it("matches the remaining portion of the pathname", () => {
+      expect(matchPath("/files/*", "/files/mj.jpg")).toMatchObject({
+        params: { "*": "mj.jpg" },
+        pathname: "/files/mj.jpg"
+      });
+      expect(matchPath("/files/*", "/files/")).toMatchObject({
+        params: { "*": "" },
+        pathname: "/files/"
+      });
+      expect(matchPath("/files/*", "/files")).toMatchObject({
+        params: { "*": "" },
+        pathname: "/files"
+      });
+    });
+  });
+});

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

@@ -42,6 +42,7 @@ describe("matchRoutes", () => {
 
   it("matches root * routes correctly", () => {
     expect(pickPaths(routes, "/not-found")).toEqual(["*"]);
+    expect(pickPaths(routes, "/hometypo")).toEqual(["*"]);
   });
 
   it("matches index routes correctly", () => {