如何使用 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>();