reactjs - 如何在基于 Typescript 的 React Web 应用程序中具有参数的 Route 元素中传递其他 Prop

Question

我在 React 中有一个功能组件，其中定义了一个带有一些路由的 Switch 组件。我想在这些路由之一(也有参数)中传递额外的 Prop ，以便在有人访问路由时我将要安装的组件中使用它。
例如，这是路线。

<Route path="/client/:id" component={Client} /> 

我希望能够在这个组件中传递一些我们需要的额外 Prop 。而且我们还需要在客户端组件中使用 Location、matches 和 history Prop 。例如，我们需要传递一个 (clientHeaderText :string)支柱。
客户端组件:

import { RouteComponentProps } from "react-router";

type TParams = { id: string };

const Client: React.SFC<RouteComponentProps<TParams>> = (props) => {
  return (
    <>
      <h1>This is the id route parameter :{props.match.params.id}</h1>
    </>
  );
};

export default Client;

如何实现此功能？

Answer 1

如果你需要将额外的 props 传递给路由组件，那么你应该使用 render Prop 和穿越路线 Prop 和 任何额外的 Prop 。

<Route
  path="/client/:id"
  render={routeProps => <Client {...routeProps} clientHeaderText="....." />}
/> 

您可能需要添加新的 clientHeaderText prop 到您的类型定义，与路由 Prop 类型合并。