diff --git a/packages/react-router/__tests__/matchRoutes-test.tsx b/packages/react-router/__tests__/matchRoutes-test.tsx
index 0d29d7405e..3e2ecfb569 100644
--- a/packages/react-router/__tests__/matchRoutes-test.tsx
+++ b/packages/react-router/__tests__/matchRoutes-test.tsx
@@ -12,9 +12,14 @@ function pickPaths(
}
describe("matchRoutes", () => {
+ let userEditRoute: RouteObject = {
+ path: "edit",
+ element:
User Edit
+ };
let userProfileRoute: RouteObject = {
path: ":id",
- element: User Profile
+ element: User Profile
,
+ children: [userEditRoute]
};
let usersRoute: RouteObject = {
path: "/users",
@@ -88,6 +93,20 @@ describe("matchRoutes", () => {
it("matches nested dynamic routes correctly", () => {
expect(pickPaths(routes, "/users/mj")).toEqual(["/users", ":id"]);
+ expect(pickPaths(routes, "/users/mj/edit")).toEqual([
+ "/users",
+ ":id",
+ "edit"
+ ]);
+ });
+
+ it("matches nested dynamic routes with params ending in = (e.x. base64 encoded Id)", () => {
+ expect(pickPaths(routes, "/users/VXNlcnM6MQ==")).toEqual(["/users", ":id"]);
+ expect(pickPaths(routes, "/users/VXNlcnM6MQ==/edit")).toEqual([
+ "/users",
+ ":id",
+ "edit"
+ ]);
});
it("matches nested * routes correctly", () => {
diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx
index 34de7a6738..b787ac5d95 100644
--- a/packages/react-router/index.tsx
+++ b/packages/react-router/index.tsx
@@ -1203,10 +1203,10 @@ function compilePath(
} else {
regexpSource += end
? "\\/*$" // When matching to the end, ignore trailing slashes
- : // Otherwise, at least match a word boundary. This restricts parent
- // routes to matching only their own words and nothing more, e.g. parent
+ : // Otherwise, match a word boundary or a proceeding /. The word boundary restricts
+ // parent routes to matching only their own words and nothing more, e.g. parent
// route "/home" should not match "/home2".
- "(?:\\b|$)";
+ "(?:\\b|\\/|$)";
}
let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");