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

Posted

技术标签:

【中文标题】如何使用 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 属性?

如下图所示,存在routePropshistorymatchlocation)。

【问题讨论】:

为什么不提供预期的参数?大概就像RouteComponentProps&lt; slug: string &gt;。 ***.com/q/50047977/3001761的欺骗。 感谢您的回复。像这样的东西:interface MyComponent extends RouteComponentProps&lt;slug: string&gt; ?我这样做不会覆盖其他东西吗? 覆盖什么其他东西? MyComponent 没有定义其他任何东西,看起来毫无意义;只需使用React.FC&lt;RouteComponentProps&lt; slug: string &gt;&gt; @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&lt;RouteParams&gt;();

以上是关于如何使用 Typescript 从 react-router-dom 访问路由参数?例如:`/some-route/:slug`的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Relay 查询从 TypeScript 转换为 ES5?

如何从 TypeScript 函数返回一个类?

Typescript:如何从 react-bootstrap 导入特定组件

如何从 TypeScript 文件生成类型定义文件?

如果我不使用放大,如何从 AppSync GraphQL 架构生成 Typescript 定义?

如何使用 sequelize-typescript 从单个字段中引用多个模型?