Encode slashes in generatePath dynamic params

contributors.yml

@@ -281,3 +281,4 @@
 - yuleicul
 - zeromask1337
 - zheng-chuang
+- levvysokiy

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

@@ -58,6 +58,11 @@ describe("generatePath", () => {
         "/courses/baz"
       );
     });
+    it("handles slashes in dynamic params", () => {
+      expect(generatePath("/courses/:id", { id: "foo/bar" })).toBe(
+        "/courses/foo%2Fbar"
+      );
+    });
   });
 
   describe("with extraneous params", () => {

packages/react-router/lib/router/utils.ts

@@ -874,6 +874,9 @@ export function generatePath<Path extends string>(
         const [, key, optional] = keyMatch;
         let param = params[key as PathParam<Path>];
         invariant(optional === "?" || param != null, `Missing ":${key}" param`);
+        if (typeof param === "string") {
+          param = param.replace(/\//g, "%2F");
+        }
         return stringify(param);
       }