使用typescript的React router v5上所需的url参数可以未定义

Question

我使用带有TypeScript的react router v5.1，并具有以下路由配置：

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

我尝试访问组件中的url参数（TokenName），使用useParams挂钩，如下所示：

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

然而，typescript认为tokenName参数可以是未定义的：

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

在这种情况下，我如何修改打字？

Answer 1

考虑如何使用enum管理它

export const enum ROUTE_PATH {
  DASHBOARD = 'dashboard'
}
export const enum ROUTE_PARAM {
  DASH_ID = 'DASH_ID',
}
<Route path={`${ROUTE_PATH.DASHBOARD}/:${ROUTE_PARAM.DASH_ID}`} />
const { DASH_ID } = useParams<ROUTE_PARAM>();

Answer 2

使用重写类型的原始思想，您不需要创建新的命名接口，它可以直接在类型参数中完成：

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

Answer 3

在这种情况下，您的< code>TokenPage代码不知道它被< code>Route包装。你是对的，如果URL不包含正确的参数，你的组件就不会被呈现。但是Typescript不知道这一点。

您在那里得到的默认类型是正确的，您应该在使用它之前对值进行空检查。

如果您想覆盖类型，useParams是泛型的，并接受指定返回值类型的类型。

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

编辑日期:2010年9月29日

useParams的最新键入已更改。

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

如您所见，新的默认值是{}，这不会暗示包含的任何键，但泛型约束确实假设这些值是string类型的。

因此，以下行现在将产生属性“tokenName”在类型“{}”上不存在。类型脚本错误。

js prettyprint-override">const { tokenName } = useParams()

要解决此问题，请键入具有已知参数的 useParams（如第一个示例中所示），也可以按如下方式键入：

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