带有 typescript 的路由器道具和自定义道具为功能组件反应路由器 dom

Question

如标题中所述，我想导入我的组件反应路由器道具和自定义道具。

我的路线如下所示：

<Route
  exact
  path="/logon/:name"
  render={(p)=>(<Content/>)}>
</Route>

在这里我收到此错误：“{}”类型缺少“CompProps”类型的以下属性：名称、历史记录、位置、匹配

错误来自我的组件，如下所示：

import {RouteComponentProps} from "react-router-dom";

interface CompProps extends RouteComponentProps {
  name: string;
}
export const Content: React.FC<CompProps> = ({
  name,
  match,
}) => {
  return (
    <section>
      <p>test</p>
    </section>
  );
};

我是 TS 的初学者，但在我看来，RouteComponentProps 应该包含（名称、历史、位置）为什么 TS 会向我抛出错误。 将自定义道具和路由器道具传递给组件的最佳实践是什么？

这是错误的屏幕截图

Answer 1

嗯，看来您的操作是正确的，我们可以获取错误的屏幕截图吗？

这是我通常做的。

type Props = { id: string };

function Content({ name, match }: RouteComponentProps<Props>) {
  return (
    <section>
      <p>Got match: {match.params.id} on name: {name}</p>
    </section>
  );
}

将点差更改为

render={(p)=>(<Content {...p} name="name" />)}>

RouteComponentProps已经公开了name ？ 所以你只想删除它并做

function Content({ name, match }: RouteComponentProps) {
  return (
    <section>
      <p>Got match: {match.params.id} on name: {name}</p>
    </section>
  );
}

Answer 2

由于“名称”是一个路径参数，它应该只能通过匹配 object 访问。

您正在使用您的名称-Property 扩展 RouterProps。 这似乎没问题。 但是将您的功能组件声明为

export const Content: React.FC<CompProps> = ({
   name,
   match,
}) => {
   ...
}

似乎是错误的。 我希望将组件定义为

export const Content: React.FC<CompProps> = (props: CompProps) => {
   const name = props.match.params.name
   return ...;
};

Answer 3

当你使用Route.render时，你需要将它提供的 props 传播到你的组件上，否则在Content组件渲染时它们将不会出现。 在您的代码中，更改此：

<Route
  exact
  path="/logon/:name"
  render={(p)=>(<Content/>)}>
</Route>

对此

<Route
  exact
  path="/logon/:name"
  render={(p)=>(<Content {...p} />)}>
</Route>