Fix Issue with decoding URLs

.changeset/decode-uri-component.md

@@ -0,0 +1,6 @@
+---
+"react-router": patch
+"@remix-run/router": patch
+---
+
+Use `safelyDecodeURIComponent` to ensure proper URL decoding of full string in `matchRoutes`.

contributors.yml

@@ -133,6 +133,7 @@
 - KubasuIvanSakwa
 - KutnerUri
 - kylegirard
+- labkey-nicka
 - landisdesign
 - latin-1
 - lequangdongg

packages/react-router-dom/__tests__/special-characters-test.tsx

@@ -763,85 +763,85 @@ describe("special character tests", () => {
  describe("memory routers", () => {
  it("does not encode characters in MemoryRouter", () => {
  let ctx = render(
- <MemoryRouter initialEntries={["/with space"]}>
+ <MemoryRouter initialEntries={["/with space&encoded:characters"]}>
  <Routes>
- <Route path="/with space" element={<ShowPath />} />
+ <Route path="/with space&encoded:characters" element={<ShowPath />} />
  </Routes>
  </MemoryRouter>
  );
 
  expect(ctx.container.innerHTML).toMatchInlineSnapshot(
- `"<pre>{"pathname":"/with space","search":"","hash":""}</pre>"`
+ `"<pre>{"pathname":"/with space&amp;encoded:characters","search":"","hash":""}</pre>"`
  );
  });
 
  it("does not encode characters in MemoryRouter (navigate)", () => {
  function Start() {
  let navigate = useNavigate();
  // eslint-disable-next-line react-hooks/exhaustive-deps
- React.useEffect(() => navigate("/with space"), []);
+ React.useEffect(() => navigate("/with space&encoded:characters"), []);
  return null;
  }
  let ctx = render(
  <MemoryRouter>
  <Routes>
  <Route path="/" element={<Start />} />
- <Route path="/with space" element={<ShowPath />} />
+ <Route path="/with space&encoded:characters" element={<ShowPath />} />
  </Routes>
  </MemoryRouter>
  );
 
  expect(ctx.container.innerHTML).toMatchInlineSnapshot(
- `"<pre>{"pathname":"/with space","search":"","hash":""}</pre>"`
+ `"<pre>{"pathname":"/with space&amp;encoded:characters","search":"","hash":""}</pre>"`
  );
  });
 
  it("does not encode characters in createMemoryRouter", () => {
  let router = createMemoryRouter(
- [{ path: "/with space", element: <ShowPath /> }],
- { initialEntries: ["/with space"] }
+ [{ path: "/with space&encoded:characters", element: <ShowPath /> }],
+ { initialEntries: ["/with space&encoded:characters"] }
  );
  let ctx = render(<RouterProvider router={router} />);
 
  expect(ctx.container.innerHTML).toMatchInlineSnapshot(
- `"<pre>{"pathname":"/with space","search":"","hash":""}</pre>"`
+ `"<pre>{"pathname":"/with space&amp;encoded:characters","search":"","hash":""}</pre>"`
  );
  });
 
  it("does not encode characters in createMemoryRouter (navigate)", () => {
  function Start() {
  let navigate = useNavigate();
  // eslint-disable-next-line react-hooks/exhaustive-deps
- React.useEffect(() => navigate("/with space"), []);
+ React.useEffect(() => navigate("/with space&encoded:characters"), []);
  return null;
  }
  let router = createMemoryRouter([
  { path: "/", element: <Start /> },
- { path: "/with space", element: <ShowPath /> },
+ { path: "/with space&encoded:characters", element: <ShowPath /> },
  ]);
  let ctx = render(<RouterProvider router={router} />);
 
  expect(ctx.container.innerHTML).toMatchInlineSnapshot(
- `"<pre>{"pathname":"/with space","search":"","hash":""}</pre>"`
+ `"<pre>{"pathname":"/with space&amp;encoded:characters","search":"","hash":""}</pre>"`
  );
  });
  });
 
  describe("browser routers", () => {
  it("encodes characters in BrowserRouter", () => {
- let testWindow = getWindow("/with space");
+ let testWindow = getWindow("/with%20space%26encoded%3Acharacters");
 
  let ctx = render(
  <BrowserRouter window={testWindow}>
  <Routes>
- <Route path="/with space" element={<ShowPath />} />
+ <Route path="/with space&encoded:characters" element={<ShowPath />} />
  </Routes>
  </BrowserRouter>
  );
 
- expect(testWindow.location.pathname).toBe("/with%20space");
+ expect(testWindow.location.pathname).toBe("/with%20space%26encoded%3Acharacters");
  expect(ctx.container.innerHTML).toMatchInlineSnapshot(
- `"<pre>{"pathname":"/with%20space","search":"","hash":""}</pre>"`
+ `"<pre>{"pathname":"/with%20space%26encoded%3Acharacters","search":"","hash":""}</pre>"`
  );
  });
 
@@ -851,37 +851,37 @@ describe("special character tests", () => {
  function Start() {
  let navigate = useNavigate();
  // eslint-disable-next-line react-hooks/exhaustive-deps
- React.useEffect(() => navigate("/with space"), []);
+ React.useEffect(() => navigate("/with%20space%26encoded%3Acharacters"), []);
  return null;
  }
 
  let ctx = render(
  <BrowserRouter window={testWindow}>
  <Routes>
  <Route path="/" element={<Start />} />
- <Route path="/with space" element={<ShowPath />} />
+ <Route path="/with space&encoded:characters" element={<ShowPath />} />
  </Routes>
  </BrowserRouter>
  );
 
- expect(testWindow.location.pathname).toBe("/with%20space");
+ expect(testWindow.location.pathname).toBe("/with%20space%26encoded%3Acharacters");
  expect(ctx.container.innerHTML).toMatchInlineSnapshot(
- `"<pre>{"pathname":"/with%20space","search":"","hash":""}</pre>"`
+ `"<pre>{"pathname":"/with%20space%26encoded%3Acharacters","search":"","hash":""}</pre>"`
  );
  });
 
  it("encodes characters in createBrowserRouter", () => {
- let testWindow = getWindow("/with space");
+ let testWindow = getWindow("/with%20space%26encoded%3Acharacters");
 
  let router = createBrowserRouter(
- [{ path: "/with space", element: <ShowPath /> }],
+ [{ path: "/with space&encoded:characters", element: <ShowPath /> }],
  { window: testWindow }
  );
  let ctx = render(<RouterProvider router={router} />);
 
- expect(testWindow.location.pathname).toBe("/with%20space");
+ expect(testWindow.location.pathname).toBe("/with%20space%26encoded%3Acharacters");
  expect(ctx.container.innerHTML).toMatchInlineSnapshot(
- `"<pre>{"pathname":"/with%20space","search":"","hash":""}</pre>"`
+ `"<pre>{"pathname":"/with%20space%26encoded%3Acharacters","search":"","hash":""}</pre>"`
  );
  });
 
@@ -891,42 +891,42 @@ describe("special character tests", () => {
  function Start() {
  let navigate = useNavigate();
  // eslint-disable-next-line react-hooks/exhaustive-deps
- React.useEffect(() => navigate("/with space"), []);
+ React.useEffect(() => navigate("/with%20space%26encoded%3Acharacters"), []);
  return null;
  }
 
  let router = createBrowserRouter(
  [
  { path: "/", element: <Start /> },
- { path: "/with space", element: <ShowPath /> },
+ { path: "/with space&encoded:characters", element: <ShowPath /> },
  ],
  { window: testWindow }
  );
  let ctx = render(<RouterProvider router={router} />);
 
- expect(testWindow.location.pathname).toBe("/with%20space");
+ expect(testWindow.location.pathname).toBe("/with%20space%26encoded%3Acharacters");
  expect(ctx.container.innerHTML).toMatchInlineSnapshot(
- `"<pre>{"pathname":"/with%20space","search":"","hash":""}</pre>"`
+ `"<pre>{"pathname":"/with%20space%26encoded%3Acharacters","search":"","hash":""}</pre>"`
  );
  });
  });
 
  describe("hash routers", () => {
  it("encodes characters in HashRouter", () => {
- let testWindow = getWindow("/#/with space");
+ let testWindow = getWindow("/#/with%20space%26encoded%3Acharacters");
 
  let ctx = render(
  <HashRouter window={testWindow}>
  <Routes>
- <Route path="/with space" element={<ShowPath />} />
+ <Route path="/with space&encoded:characters" element={<ShowPath />} />
  </Routes>
  </HashRouter>
  );
 
  expect(testWindow.location.pathname).toBe("/");
- expect(testWindow.location.hash).toBe("#/with%20space");
+ expect(testWindow.location.hash).toBe("#/with%20space%26encoded%3Acharacters");
  expect(ctx.container.innerHTML).toMatchInlineSnapshot(
- `"<pre>{"pathname":"/with%20space","search":"","hash":""}</pre>"`
+ `"<pre>{"pathname":"/with%20space%26encoded%3Acharacters","search":"","hash":""}</pre>"`
  );
  });
 
@@ -936,39 +936,39 @@ describe("special character tests", () => {
  function Start() {
  let navigate = useNavigate();
  // eslint-disable-next-line react-hooks/exhaustive-deps
- React.useEffect(() => navigate("/with space"), []);
+ React.useEffect(() => navigate("/with%20space%26encoded%3Acharacters"), []);
  return null;
  }
 
  let ctx = render(
  <HashRouter window={testWindow}>
  <Routes>
  <Route path="/" element={<Start />} />
- <Route path="/with space" element={<ShowPath />} />
+ <Route path="/with space&encoded:characters" element={<ShowPath />} />
  </Routes>
  </HashRouter>
  );
 
  expect(testWindow.location.pathname).toBe("/");
- expect(testWindow.location.hash).toBe("#/with%20space");
+ expect(testWindow.location.hash).toBe("#/with%20space%26encoded%3Acharacters");
  expect(ctx.container.innerHTML).toMatchInlineSnapshot(
- `"<pre>{"pathname":"/with%20space","search":"","hash":""}</pre>"`
+ `"<pre>{"pathname":"/with%20space%26encoded%3Acharacters","search":"","hash":""}</pre>"`
  );
  });
 
  it("encodes characters in createHashRouter", () => {
- let testWindow = getWindow("/#/with space");
+ let testWindow = getWindow("/#/with%20space%26encoded%3Acharacters");
 
  let router = createHashRouter(
- [{ path: "/with space", element: <ShowPath /> }],
+ [{ path: "/with space&encoded:characters", element: <ShowPath /> }],
  { window: testWindow }
  );
  let ctx = render(<RouterProvider router={router} />);
 
  expect(testWindow.location.pathname).toBe("/");
- expect(testWindow.location.hash).toBe("#/with%20space");
+ expect(testWindow.location.hash).toBe("#/with%20space%26encoded%3Acharacters");
  expect(ctx.container.innerHTML).toMatchInlineSnapshot(
- `"<pre>{"pathname":"/with%20space","search":"","hash":""}</pre>"`
+ `"<pre>{"pathname":"/with%20space%26encoded%3Acharacters","search":"","hash":""}</pre>"`
  );
  });
 
@@ -978,23 +978,23 @@ describe("special character tests", () => {
  function Start() {
  let navigate = useNavigate();
  // eslint-disable-next-line react-hooks/exhaustive-deps
- React.useEffect(() => navigate("/with space"), []);
+ React.useEffect(() => navigate("/with%20space%26encoded%3Acharacters"), []);
  return null;
  }
 
  let router = createHashRouter(
  [
  { path: "/", element: <Start /> },
- { path: "/with space", element: <ShowPath /> },
+ { path: "/with space&encoded:characters", element: <ShowPath /> },
  ],
  { window: testWindow }
  );
  let ctx = render(<RouterProvider router={router} />);
 
  expect(testWindow.location.pathname).toBe("/");
- expect(testWindow.location.hash).toBe("#/with%20space");
+ expect(testWindow.location.hash).toBe("#/with%20space%26encoded%3Acharacters");
  expect(ctx.container.innerHTML).toMatchInlineSnapshot(
- `"<pre>{"pathname":"/with%20space","search":"","hash":""}</pre>"`
+ `"<pre>{"pathname":"/with%20space%26encoded%3Acharacters","search":"","hash":""}</pre>"`
  );
  });
  });

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

@@ -108,6 +108,14 @@ describe("matchPath", () => {
  pathnameBase: "/users/mj",
  });
  });
+
+ it("matches second consecutive slash as a parameter", () => {
+ expect(matchPath("/:id", "//")).toMatchObject({
+ params: { id: "/" },
+ pathname: "//",
+ pathnameBase: "//",
+ });
+ });
  });
 
  describe("with { end: false }", () => {
@@ -164,6 +172,10 @@ describe("matchPath", () => {
  matchPath({ path: "/users/mj", end: false }, "/users/mj2")
  ).toBeNull();
  });
+
+ it("does not match second consecutive slash as a parameter", () => {
+ expect(matchPath({ path: "/:id", end: false }, "//")).toBeNull();
+ });
  });
 
  describe("with { end: false } and a / pattern", () => {