什么在 TypeScript 中声明 react-router 参数

Posted 2023-02-21

【中文标题】什么在 TypeScript 中声明 react-router 参数

【英文标题】：What to declare react-router argument as in TypeScript

【发布时间】：2018-04-18 12:20:15

【问题描述】：

我正在尝试使用 Typescript 以接受参数的方式设置 react-router。

在我的render 元素中，我有

<Route path="/show/:id" component=TestComp />

我将TestComp定义为

const TestComp = ( match ) => (
    <div>
        <h2>Showing specified ID: match.params.id</h2>
    </div>
)

但是，VS Code 会在match 参数下划线（在TestComp 的声明中）并告诉我

绑定元素 'match' 隐含地具有 'any' 类型。

编译失败。

谁能告诉我应该声明什么类型match？我试过RouteProps 但这也不起作用。查看 index.d.ts，我认为它被定义为 match<P>，但我不确定如何将参数声明为泛型类型。

更新 根据@TarasPolovyi 的回答，我添加了以下内容：

如您所见，这仍然存在问题。

【问题讨论】：

您是否从react-router 导入了match？也许这可以解释你的一些错误。您还需要从TestComp 声明类型。

【参考方案1】：

如果您使用的是 react-router v4，则从 react-router-dom 导入 RouteComponentProps 并使用类型 RouteComponentProps<RouteInfo> - 参数名称必须匹配

【参考方案2】：

如果您使用的是 Typescript 和 React Router V 4.0，那么语法会有所不同。 您声明您的路线如下：

<Route path="/home/:topic?" render=() => 
   return this.renderView(<ContentHolder />);
 />

然后组件声明如下：

interface RouteInfo 
    topic: string;


interface ComponentProps extends RouteComponentProps<RouteInfo> 


class ContentHolder extends Component<ComponentProps> 

    render() 
        return (
            <Content>
                <h1 className="page-title">this.props.match.params.topic</h1>
            </Content>
        );
    ;
;

export default withRouter(ContentHolder);

然后在您的 this.props.match.params 中，您将在 VS Code 和 IntelliJ 中获得完全的 IntelliSense

【参考方案3】：

首先您需要从react-router-dom 导入match。

这是我从 create react app 生成的代码的副本：

import 
    BrowserRouter as Router,
    Route,
    Link,
    match
 from 'react-router-dom';

你需要这样的界面：

interface Identifiable id: string; 

match 是你需要的东西。像这样：

const TestComp = (mathedRoute: match<Identifiable>) => (
    <div>
        <h2>Showing specified ID: mathedRoute.params.id</h2>
    </div>
)

【参考方案4】：

您应该安装一个包@types/react-router，它具有react-router 的类型声明。它包含一个接口match<P>，因此您可以使用它来描述您的属性类型。

【讨论】：

我已经有了 react-router 的类型。你能更清楚一点吗？如果我键入const ShowCrawl = ( match: match<P> ) =>，那么它会在match 下加下划线，其中“'match' 仅指一种类型，但在这里用作值。”并在P 下划线“找不到名称'P'”。所以我显然仍然没有正确声明它。

你应该定义一个像这样的接口：interface Identifiable public string id; 并且改变你的匹配是这样的：( match: match<Identifiable> )。显然，如果您的结构更改为更复杂的结构，您应该相应地更改该接口（以及接口名称；））

您也可以尝试将您的反应组件声明为const TestComp: React.SFC<TestCompProps> = (props) => /* your code */。其中interface TestCompProps = RouteComponentProps<YourProps>; 和interface YourProps = /* Your custom props here/ */ ;。这一定是最灵活的方式。

据我所知，您不能将变量类型指定为对象解构语法的一部分。您应该声明整个参数的类型，然后应用解构，这意味着以下构造应该起作用：const TestComp = ( match : RouteComponentProps<RouteInfo>) => /* ... */。 RouteComponentProps 是您在这种情况下应该使用的接口。

【参考方案5】：

要将道具类型指定为RouteComponentProps<T>，则可以使用match.params.your_prop访问

<Route path="/show/:showId" component=TestComp / >

<Link to='/show/1'>CLICK HERE</Link>

// or, use string interpolation with variable as below
<Link to=`/show/$id`>CLICK HERE</Link>

import React from "react";
import  RouteComponentProps  from "react-router-dom";

type Props = 
    showId: string;


const TestComp= ( match : RouteComponentProps<Props>) => 
    console.log(match.params.showId);

【参考方案6】：

有两种方法

const Container = ( match : RouteComponentProps< showId: string>) => 
 const  showId = match.params.showId;

或

const Container = () => 
  const  showId = useParams< showId: string >();