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

Question

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

我的路线看起来像这样：

<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

当您使用路由时。渲染，您需要将它提供的道具散布到组件上，否则当内容组件渲染时，道具将不存在。在代码中，更改以下内容：

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

对此

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

Answer 2

由于“name”是一个path参数，因此只能通过match对象访问它。

您正在使用name属性扩展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

嗯，看起来你所做的是正确的，我们能得到错误的截图吗？

这是我通常做的事。

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）=

RouteComponentProps是否已经公开了name？所以你就想把它拿掉

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