如何使用 Typescript 从 react-router-dom 访问路由参数？例如：`/some-route/:slug`

Posted 2023-02-21

【中文标题】如何使用 Typescript 从 react-router-dom 访问路由参数？例如：`/some-route/:slug`

【英文标题】：How to access route params from react-router-dom using Typescript? Ex: `/some-route/:slug`

【发布时间】：2020-12-17 12:26:33

【问题描述】：

以这个带有路由参数slug的示例路由为例：

ROUTES.ts

export const SOME_ROUTE = `/some-route/:slug`;

这个<Switch> 组件将呈现<Route> 的。

AllRoutes.tsx

import React from "react";
import * as ROUTES from "@routes/ROUTES";

interface AllRoutes   


const AllRoutes: React.FC<AllRoutes> = (props) => 
  console.log("Rendering AllRoutes...");

  return(
    <Switch>
      <Route exact path=ROUTES.SOME_ROUTE component=MyComponent/>
    </Switch>
  );
;

export default AllRoutes;

现在从渲染组件开始：

MyComponent.tsx

import React from "react";
import HomePage from "./HomePage";
import  RouteComponentProps  from "react-router-dom";

interface MyComponent extends RouteComponentProps 


const MyComponent: React.FC<MyComponent> = (props) => 
  console.log("Rendering MyComponent...");

  console.log(props.match.params.slug);  // TRYING TO ACCESS THE `:slug` ROUTE PARAM

  return(
    <HomePage/>
  );
;

export default MyComponent;

问题

我收到一条错误消息，指出 slug 属性不存在。即使它 100% 存在，因为值会被记录。但是 Typescript 并没有意识到这一点。

我是否需要手动扩展 RouteComponentProps 以添加 props.match.params.slug 属性？

如下图所示，存在routeProps（history、match、location）。

【问题讨论】：

为什么不提供预期的参数？大概就像RouteComponentProps< slug: string >。 ***.com/q/50047977/3001761的欺骗。

感谢您的回复。像这样的东西：interface MyComponent extends RouteComponentProps<slug: string> ？我这样做不会覆盖其他东西吗？

覆盖什么其他东西？ MyComponent 没有定义其他任何东西，看起来毫无意义；只需使用React.FC<RouteComponentProps< slug: string >>。

@jonrsharpe 我的意思是RouteComponentProps 中定义的其他内容，来自@types/react-router-dom。

还有什么？如果 not 指定参数，您认为泛型是什么？看定义：github.com/DefinitelyTyped/DefinitelyTyped/blob/….

【参考方案1】：

借助 cmets 和这些其他内容：

In ReactJS trying to get params but I get property 'id' does not exist on type '' 还有这篇文章：Using typescript to write react-router 5

这是我的做法：

import React from "react";
import HomePage from "./HomePage";
import  RouteComponentProps  from "react-router-dom";

interface RouteParams 
  slug: string


interface MyComponent extends RouteComponentProps<RouteParams> 


const MyComponent: React.FC<MyComponent> = (props) => 
  console.log("Rendering MyComponent...");

  console.log(props.match.params.slug);

  return(
    <HomePage/>
  );
;

export default MyComponent;

useParams()

并且还使用useParams() 钩子：

interface RouteParams 
  slug: string


const params = useParams<RouteParams>();

【讨论】：

看起来该链接与您使用 useParams() 的方式不同。对不起，钩子新手。你把它放在哪里？

@BBaysinger 您可以从react-router-dom 导入useParams。 Link

我得到了导入。声明放在哪里？

@BBaysinger 在d.ts 文件或任何您认为合适的.ts 文件中。导出它，然后在需要使用它的任何地方导入它。像答案中的示例一样使用它：const params = useParams<RouteParams>();