typescript - 带有 typescript 的 React 路由器 v5 上所需的 url 参数，可以是未定义的

Question

我正在使用带有 TypeScript 的 react-router v5.1 并具有以下路由配置:

<Router basename="/" hashType="slash">
    <Switch>
        <Route path="/token/:tokenName">
            <TokenPage />
        </Route>
    </Switch>
</Router>

我尝试使用 useParams 钩子(Hook)访问组件中的 url 参数(tokenName)，如下所示:

const TokenPage: FC<TokenPageProps> = props => {
    const { tokenName } = useParams()
    ...
}

但是，typescript 认为 tokenName参数可以是未定义的:



这是没有意义的，因为如果 URL 中缺少参数， react 路由器将不会匹配此路由。

在这种情况下，我该如何解决打字问题？

Answer 1

在这种情况下，您的 TokenPage代码不知道它被 Route 包裹.你是对的，如果 URL 不包含正确的参数，你的组件将不会被渲染。但是 Typescript 并没有意识到这一点。
你得到的默认类型是正确的，你应该在使用它之前检查值。
如果您想覆盖输入，useParams是通用的并接受指定返回值类型的类型。

interface ParamTypes {
  tokenName: string
}
const { tokenName } = useParams<ParamTypes>()

编辑 09/29/20
latest typing对于 useParams改变了。

export function useParams<Params extends { [K in keyof Params]?: string } = {}>(): Params;

如您所见，新的默认值为 {}这并不意味着包含任何键，但通用约束确实假定值的类型为 string .
所以下面的行现在将产生 Property 'tokenName' does not exist on type '{}'. typescript 错误。

const { tokenName } = useParams()

要解决此问题，请键入 useParams使用第一个示例中的已知参数，或者您这样输入:

const { tokenName } = useParams<Record<string, string | undefined>>()