Question

我有一个React BrowserRouter，其中有三个路由，如下所示：

<BrowserRouter>
            <Switch>
                <Route exact
                       path="/"
                       component={(routeProps: object) => (
                           <Component1 toggle="Previous" {...routeProps} />
                       )}
                />
                <Route path="/active"
                       component={(routeProps: object) => (
                           <Component1 toggle="Active" {...routeProps} />
                       )}
                />
                <Route path="/items/:id"
                       render={(props) => <Component2 {...props}/>}
                />
            </Switch>
</BrowserRouter>

我正尝试将id传递给Component2，如图所示，以便通过id并通过get api调用获取项。我的Component2如下所示：

export default class Component2 extends React.Component<Props & RouteComponentProps, State> {

    public constructor(props: Props & RouteComponentProps) {
        super(props);
        this.state = {
            item: {
                //Item initialization
            }
        };
    }

    public async componentWillMount() {
        let job = await ItemService.fetch(this.props.match.params);
        this.setState({item: item});
    };


    public render() {
        let {item} = this.state;
        return (
            <div className="item-details">
                <Component3 item={item}/>
            </div>

        )
    }
}

但是，我在包含this.props.match.params.id的行上收到错误消息。

第一个错误是在this.props.match.params状态下，如果我不包括RouteComponentProps：Property match does not exist on type <Readonly<Props> & Readonly<ReactNode>
- 还有另一篇Stack Overflow帖子，引发了这样的想法，您需要在ReactComponent中使用RouteComponentProps才能找到道具，但没有解释原因。
如果添加RouteComponentProps，则可以解决第一个错误，但仍无法从参数中获取ID。我收到错误消息：property id does not exist on type {}

在搜索了关于SO的问题和许多反应路由示例之后，我陷入了困境。我的最终目标是拥有一个组件（Component2），该组件将：

当网址与items/:id（即/items/3）匹配时被路由到
将ID 3传递到该Component并调用Backend以获取项目
将项目从后端调用保存到状态（Component2的本地状态）
将该项目从州传递到子级组件中

我也很好奇两者之间的区别：

React.Component
React.Component<Props>
React.Component<Props, State>
React.Component<Props & RouteComponentProps, State>

当我使用上面的React.Components切换组件声明时，作为对<Route中组件的引用会产生错误。

Answer 1

RouteComponentProps具有可选的通用参数（默认为{}），用于指定期望的参数。类型声明为：

export interface RouteComponentProps<Params extends { [K in keyof Params]?: string } = {}, C extends StaticContext = StaticContext, S = H.LocationState> {
  history: H.History;
  location: H.Location<S>;
  match: match<Params>;
  staticContext?: C;
}

export interface match<Params extends { [K in keyof Params]?: string } = {}> {
  params: Params;
  isExact: boolean;
  path: string;
  url: string;
}

因此，如果您将用法声明为RouteComponentProps<{ id: string}>，则应正确键入。

编辑：

我也很好奇两者之间的区别：

对于大多数这些选项，只是如果您未指定泛型类型，则将假设类型为{}。因此React.Component等效于React.Component<{}, {}>，并且props和state都将被键入为空对象。

当您拥有<Props & RouteComponentProps>时，这就是an intersection type，这意味着组件道具将Props和RouteComponentProps合并在一起。

使用动态路由反应路由无法找到this.props.match.params

1 个答案: