Properly escape :params in generatePath

Fixes #11940

Author: mjackson

.changeset/eleven-oranges-design.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Properly escape interpolated :param values in generatePath()

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

@@ -133,6 +133,14 @@ describe("generatePath", () => {
     });
   });
 
+  describe("with a param that contains a /", () => {
+    it("properly encodes the slash", () => {
+      expect(generatePath("/courses/:id/grades", { id: "a/b" })).toBe(
+        "/courses/a%2Fb/grades"
+      );
+    });
+  });
+
   it("throws only on on missing named parameters, but not missing splat params", () => {
     expect(() => generatePath(":foo")).toThrow();
     expect(() => generatePath("/:foo")).toThrow();

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

@@ -1108,7 +1108,7 @@ export function generatePath<Path extends string>(
         const [, key, optional] = keyMatch;
         let param = params[key as PathParam<Path>];
         invariant(optional === "?" || param != null, `Missing ":${key}" param`);
-        return stringify(param);
+        return encodeURIComponent(stringify(param));
       }
 
       // Remove any optional markers from optional static segments