使用 react-router-dom 在组件基础上键入 location.state 属性

Question

我想定义某个无状态组件的location.state 可以是什么类型。 我找到了几篇基于RouteComponentProps 类型的文章，但我无法弄清楚细节。

假设在这个例子中，我希望 location.state 属性是类型

type StateType = {
    id: number,
    type: number
}

或者让 type` 甚至是一个枚举。这可以实现吗？

import React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
const Index = ({ location, history }) => {
    return (
        <div>Test</div>
    )
}

export default withRouter(Index)

Answer 1

react-router 的类型 RouteComponentProps 是泛型类型。这是您可以使用自定义类型定义位置状态的方式（我修改了您的示例）：

import React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';

type StateType = {
    id: number,
    type: number
}

type IndexProps = RouteComponentProps<{}, {}, StateType>;

const Index: React.FC<IndexProps> = ({ location, history }) => {
    return (
        <div>{location.state && (
            <ul>
                <li>{location.state.id}</li>
                <li>{location.state.type}</li>
            </ul>
        )}</div>
    );
}

export default withRouter(Index);

一些要点：

• 您应该经常检查是否定义了location.state，可能会发生状态未通过的情况
• 我们必须通过 React.FC 泛型类型为组件本身添加正确的类型（不过，还有其他方法可以做到这一点......）
• RouteComponentProps 实际上得到了正确定义的三种类型：
  • 首先（在我的示例中为空{}）-<Route />'s parameters 的类型
  • second（在我的示例中为空 {}）-<StaticRouter />'s context 的类型
  • 最后是第三个（在我的示例中为StateType）- 位置状态的类型
• location 对象也可以在 history.location 中找到，但它不是类型的，应该不使用，如 stated in documentation：

  ...历史对象是可变的。因此建议从<Route> 的渲染道具访问位置，而不是从history.location。 ...

Answer 2

您可以使用泛型类型Location 并简单地使用StateType 扩展它。

import { Location } from 'history';

type LocationProps = Location<StateType>;

记得正确输入你的组件：

interface IndexProps {
   location: LocationProps;
   classes: // your type
   history: // your type
}

const Index = ({ classes, location, history }: IndexProps) => {