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

Posted 2023-02-21

【中文标题】如何在基于 Typescript 的 React Web 应用程序中具有参数的 Route 元素中传递其他道具

【英文标题】：How to pass additional props throughout a Route element that has parameters in a Typescript based React Web Application

【发布时间】：2021-10-21 16:59:22

【问题描述】：

我在 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;

如何实现此功能？

【参考方案1】：

如果您需要向路由组件传递额外的道具，那么您应该使用render 道具并通过路由道具和任何额外的道具。

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

您可能需要将新的 clientHeaderText 属性添加到您的类型定义中，并与路由属性类型合并。

【讨论】：

是的。这是正确的。我认为这是 javascript 的“方式”。但是这种方法的问题在于在组件中接收和使用这些道具时。我的意思是，我真的无法想象用客户端组件中的类型定义来处理这些道具的方法。你知道如何处理它吗？

@doDDy 好吧，这一切最终都变成了 javascript。不幸的是，我对 Typescript 不是很精通，尽管我知道的足够多，我相信您需要 route-props 类型和组件 props 类型的联合。

【参考方案2】：

如果你想传递额外的 Props，你可以在你的组件中使用路由自定义钩子 useParams, useLocation, useHistory, useRouteMatch（你可以找到更多关于这个here）。使用这种方法，您无需在客户端组件中接收RouteComponentProps<TParams>，最终代码如下所示。

路线元素：

<Route path="/client/:id" render=() => <Client clientHeaderText=clientHeaderText/>/>

客户端组件：

export type ClientProps =  clientHeaderText :string ;
const Client: React.SFC<ClientProps> = (props) => 
  const params = useParams<TParams>();
  return (<h1> props.clientHeaderText : params.id </h1>);
;
export default Client;