Skip to content

Commit

Permalink
fix: support base64 encoded ids on nested routes (#8291)
Browse files Browse the repository at this point in the history
Modify the non-capturing group at the end of compilePath to include the proceeding /
This is necessary for paths that include base64 included ids such as relay globalIds
(e.x. users/RGFzaGJvYXJkOjE1Nzk=/edit)
  • Loading branch information
mikeldking authored Dec 9, 2021
1 parent 38933fc commit a0a5ea4
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 4 deletions.
21 changes: 20 additions & 1 deletion packages/react-router/__tests__/matchRoutes-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,14 @@ function pickPaths(
}

describe("matchRoutes", () => {
let userEditRoute: RouteObject = {
path: "edit",
element: <h1>User Edit</h1>
};
let userProfileRoute: RouteObject = {
path: ":id",
element: <h1>User Profile</h1>
element: <h1>User Profile</h1>,
children: [userEditRoute]
};
let usersRoute: RouteObject = {
path: "/users",
Expand Down Expand Up @@ -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", () => {
Expand Down
6 changes: 3 additions & 3 deletions packages/react-router/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down

0 comments on commit a0a5ea4

Please sign in to comment.