如何使用react router v6指定useParams的结果类型？

Question

在 React Router v5 中，为了指定 useParams 的结果类型，我使用了：

const { param1, param2 } = useParams<{ param1: string, param2: string }>();

如何使用 React Router v6 做到这一点？

我不知道如何输入超过 1 个参数（例如：）useParams<"param1">()，也不知道如何输入参数 asstring和 not string | undefined（参见问题）。

Answer 1

我正在寻找同样的东西，在研究了 useParams 的类型之后，我发现你需要将 params 的键作为字符串传递，例如：

const { param1 } = useParams<'param1'>();

如果您想要多个参数，只需使用打字稿，|如下例所示。

type Params = 'a' | 'b' | 'c';
// ...
const params = useParams<Params>();

string | undefined由于反应路由器类型，返回的对象的值将始终具有类型。

export declare type Params<Key extends string = string> = {
    readonly [key in Key]: string | undefined;
};

但最终你总是可以使用打字稿as

interface Params {
    a: string;
}

const params = useParams<keyof Params>() as Params;