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

Question

以这个带有路由参数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;

现在从渲染的组件：

我的组件.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 ）。

Answer 1

在评论和这些其他内容的帮助下：

• 在 ReactJS 中尝试获取参数，但我在类型“{}”上不存在属性“id”
• 还有这篇文章： 使用打字稿编写 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()钩子：

interface RouteParams {
  slug: string
}

const params = useParams<RouteParams>();