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

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

我的路线如下所示：

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

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>
  );
};

（）}>

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

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

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

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>
  );
};

从“react router dom”导入{RouteComponentProps}；
接口CompProps扩展了RouteComponentProps{
名称：字符串；
}
导出常量内容：React.FC=({
名称
火柴
}) => {
返回(
试验

);
};

我是TS的初学者，但我认为RouteComponentProps应该包含（名称、历史、位置）为什么TS会把错误推到我身上。 将自定义道具和路由器道具传递给组件的最佳实践是什么

下面是错误的屏幕截图

---

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

这是我通常做的事

type Props = { id: string };

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

---

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

这是我通常做的事

type Props = { id: string };

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

---

使用

Route.render

时，您需要将它提供的道具散布到组件上，否则当

内容

组件呈现时，道具将不存在。在代码中，更改以下内容：

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

（）}>

对此

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

（）}>

当您使用

Route.render

时，您需要将它提供的道具散布到组件上，否则当

内容

组件呈现时，道具将不存在。在代码中，更改以下内容：

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

（）}>

对此

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

（）}>

由于“name”是路径参数，因此只能通过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 ...;
};

导出常量内容：React.FC=({
名称
火柴
}) => {
...
}

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

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

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

export const Content:React.FC=（props:CompProps）=>{
const name=props.match.params.name
回来
};

由于“name”是路径参数，因此只能通过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 ...;
};

导出常量内容：React.FC=({
名称
火柴
}) => {
...
}

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

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

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

export const Content:React.FC=（props:CompProps）=>{
const name=props.match.params.name
回来
};

我按要求添加了一个screeenshot。是的，只要做

渲染={（p）=>（）}>

只要添加一条注释，你就可以声明

名称
为
内容道具
，但决不将其传递给
有像useLocation或useHistory这样的帮助函数，这样我也可以获得道具。但这是最好的做法吗。这意味着我应该只在与component={Content}相关的情况下导入RouteComponentProps，但是我如何将自定义的props传递给我的内容组件呢？谢谢，props这个名字是不需要的，因为react router是在上一个路由中获取的。我被RouteComponents的道具弄糊涂了，但是这样我就得到了一切。路由器道具和自定义道具。谢谢我按要求添加了一个screenshot。是的，只要做
render={（p）=>（）}>
只要添加一条注释，你就可以声明
name
为
ContentProps
，但决不将其传递给
有像useLocation或useHistory这样的帮助函数，这样我也可以获得道具。但这是最好的做法吗。这意味着我应该只在与component={Content}相关的情况下导入RouteComponentProps，但是我如何将自定义的props传递给我的内容组件呢？谢谢，props这个名字是不需要的，因为react router是在上一个路由中获取的。我被RouteComponents的道具弄糊涂了，但是这样我就得到了一切。路由器道具和自定义道具。谢谢但是当我用TS传播道具时，我收到另一个错误，路径=>属性“name”在类型“{history:history；location:location；match:match；staticContext？：staticContext | undefined；}”中丢失，但在类型“CompProps.TS（2741）Content.tsx（5，3）中是必需的：“name”在这里声明。但是当我使用TS传播道具时，我收到另一个错误，路径=>属性“name”在类型“{history:history；location:location；match:match；staticContext？：staticContext | undefined；}”中丢失，但在类型“CompProps”中是必需的。TS（2741）Content.tsx（5，3）：“name”在这里声明。是的，你说得对，我把它拿走了。我还把它标记为已解决。无论如何谢谢你是对的，我把它删除了。我还把它标记为已解决。无论如何，谢谢