如何在基于Typescript的ReactWeb应用程序中具有参数的Route元素中传递其他道具

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

例如,这是路线。

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

我希望能够在这个组件中传递一些我们需要的额外道具。而且我们还需要在客户端组件中使用 Location、matches 和 history 道具。例如,我们需要传递一个 (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;

如何实现此功能?

以上是如何在基于Typescript的ReactWeb应用程序中具有参数的Route元素中传递其他道具的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>