Make params consistent for string paths

README.md

@@ -318,12 +318,15 @@ const User = () => {
   const params = useParams();
 
   params.id; // "1"
+
+  // alternatively, use the index to access the prop
+  params[0]; // "1"
 };
 
 <Route path="/user/:id" component={User}> />
 ```
 
-For regex paths, parameters are accessible as indices or through their group name.
+It is the same for regex paths. Capture groups can be accessed by their index, or if there is a named capture group, that can be used instead.
 
 ```js
 import { Route, useParams } from "wouter";

packages/wouter-preact/types/index.d.ts

@@ -30,6 +30,9 @@ export * from "./router.js";
 
 import { RouteParams } from "regexparam";
 
+export type StringRouteParams<T extends string> = RouteParams<T> & {
+  [param: number]: string | undefined;
+};
 export type RegexRouteParams = { [key: string | number]: string | undefined };
 
 /**
@@ -67,7 +70,7 @@ export interface RouteProps<
         params: T extends DefaultParams
           ? T
           : RoutePath extends string
-          ? RouteParams<RoutePath>
+          ? StringRouteParams<RoutePath>
           : RegexRouteParams
       ) => ComponentChildren)
     | ComponentChildren;
@@ -77,7 +80,7 @@ export interface RouteProps<
       T extends DefaultParams
         ? T
         : RoutePath extends string
-        ? RouteParams<RoutePath>
+        ? StringRouteParams<RoutePath>
         : RegexRouteParams
     >
   >;
@@ -163,7 +166,7 @@ export function useRoute<
   T extends DefaultParams
     ? T
     : RoutePath extends string
-    ? RouteParams<RoutePath>
+    ? StringRouteParams<RoutePath>
     : RegexRouteParams
 >;
 
@@ -176,7 +179,7 @@ export function useSearch<
 >(): ReturnType<H>;
 
 export function useParams<T = undefined>(): T extends string
-  ? RouteParams<T>
+  ? StringRouteParams<T>
   : T extends undefined
   ? DefaultParams
   : T;

packages/wouter/src/index.js

@@ -99,20 +99,22 @@ const matchRoute = (parser, route, path, loose) => {
         true,
 
         (() => {
-          /// for regex paths, `keys` will always be false
-          if (keys !== false) {
-            // an object with parameters matched, e.g. { foo: "bar" } for "/:foo"
-            // we "zip" two arrays here to construct the object
-            // ["foo"], ["bar"] → { foo: "bar" }
-            return Object.fromEntries(keys.map((key, i) => [key, matches[i]]));
-          }
+          // for regex paths, `keys` will always be false
+
+          // an object with parameters matched, e.g. { foo: "bar" } for "/:foo"
+          // we "zip" two arrays here to construct the object
+          // ["foo"], ["bar"] → { foo: "bar" }
+          const groups =
+            keys !== false
+              ? Object.fromEntries(keys.map((key, i) => [key, matches[i]]))
+              : result.groups;
 
           // convert the array to an instance of object
           // this makes it easier to integrate with the existing param implementation
           let obj = { ...matches };
 
           // merge named capture groups with matches array
-          result.groups && Object.assign(obj, result.groups);
+          groups && Object.assign(obj, groups);
 
           return obj;
         })(),

packages/wouter/test/parser.test.tsx

@@ -7,7 +7,7 @@ import { Router, useRouter, useRoute, Parser } from "wouter";
 import { memoryLocation } from "wouter/memory-location";
 
 // Custom parser that uses `path-to-regexp` instead of `regexparam`
-const pathToRegexpParser: Parser = (route: string | RegExp) => {
+const pathToRegexpParser: Parser = (route: string) => {
   const keys: Key[] = [];
   const pattern = pathToRegexp(route, keys);
 
@@ -42,6 +42,6 @@ it("allows to change the behaviour of route matching", () => {
 
   expect(result.current).toStrictEqual([
     true,
-    { pages: undefined, rest: "10/bio", 0: "home" },
+    { 0: "home", 1: undefined, 2: "10/bio", pages: undefined, rest: "10/bio" },
   ]);
 });

packages/wouter/test/use-params.test-d.ts

@@ -10,12 +10,18 @@ it("returns an object with arbitrary parameters", () => {
 
   expectTypeOf(params).toBeObject();
   expectTypeOf(params.any).toEqualTypeOf<string | undefined>();
+  expectTypeOf(params[0]).toEqualTypeOf<string | undefined>();
 });
 
 it("can infer the type of parameters from the route path", () => {
   const params = useParams<"/app/users/:name?/:id">();
 
-  expectTypeOf(params).toMatchTypeOf<{ id: string; name?: string }>();
+  expectTypeOf(params).toMatchTypeOf<{
+    0?: string;
+    1?: string;
+    id: string;
+    name?: string;
+  }>();
 });
 
 it("can accept the custom type of parameters as a generic argument", () => {

packages/wouter/test/use-params.test.tsx

@@ -18,7 +18,10 @@ it("contains a * parameter when used inside an empty <Route />", () => {
     ),
   });
 
-  expect(result.current).toEqual({ "*": "app-2/goods/tees" });
+  expect(result.current).toEqual({
+    0: "app-2/goods/tees",
+    "*": "app-2/goods/tees",
+  });
 });
 
 it("returns an empty object when there are no params", () => {
@@ -40,7 +43,12 @@ it("returns parameters from the closest parent <Route /> match", () => {
     ),
   });
 
-  expect(result.current).toEqual({ id: "1", name: "maria" });
+  expect(result.current).toEqual({
+    0: "1",
+    1: "maria",
+    id: "1",
+    name: "maria",
+  });
 });
 
 it("rerenders with parameters change", () => {
@@ -57,10 +65,20 @@ it("rerenders with parameters change", () => {
   expect(result.current).toBeNull();
 
   act(() => navigate("/posts/all"));
-  expect(result.current).toEqual({ a: "posts", b: "all" });
+  expect(result.current).toEqual({
+    0: "posts",
+    1: "all",
+    a: "posts",
+    b: "all",
+  });
 
   act(() => navigate("/posts/latest"));
-  expect(result.current).toEqual({ a: "posts", b: "latest" });
+  expect(result.current).toEqual({
+    0: "posts",
+    1: "latest",
+    a: "posts",
+    b: "latest",
+  });
 });
 
 it("extracts parameters of the nested route", () => {
@@ -79,5 +97,10 @@ it("extracts parameters of the nested route", () => {
     ),
   });
 
-  expect(result.current).toEqual({ version: "v2", chain: "eth" });
+  expect(result.current).toEqual({
+    0: "v2",
+    1: "eth",
+    version: "v2",
+    chain: "eth",
+  });
 });

packages/wouter/test/use-route.test-d.ts

@@ -40,6 +40,9 @@ it("infers parameters from the route path", () => {
 
   if (inferedParams) {
     expectTypeOf(inferedParams).toMatchTypeOf<{
+      0?: string;
+      1?: string;
+      2?: string;
       name?: string;
       id: string;
       wildcard?: string;