如何使用 Typescript 在 React Router v5 中传递道具来路由？

Question

我有一条看起来像这样的路线，它渲染得很好：

<Route
  exact={true} 
  path="/"
  render={() => {
    return <Home/>
  }}
/>

如果我添加任何道具，我会收到以下警告：

<Route
   exact={true} path="/"
   render={() => {
     return <Home foo="bar"/>
   }}
/>

键入'{ foo：字符串； }' 不可分配给类型 'IntrinsicAttributes & {孩子？：反应节点； }'。类型上不存在属性“foo” 'IntrinsicAttributes & { children?: ReactNode; }'。 TS2322

如何使用 Typescript 和 React Router 将 props 传递给组件？

我的Home 组件如下所示：

type homeType = {
  foo: string
}

const Home: React.FC = ({foo}: homeType) => { 
  return <p>{foo}</p>
}

Answer 1

您的 home 组件需要使用将发送给它的 props 来定义，即

import React from 'react';

type CardProps = {
  title: string,
  paragraph: string
}

export const Card = ({ title, paragraph }: CardProps) => 
<aside>
  <h2>{ title }</h2>
  <p>
    { paragraph }
  </p>
</aside>

const el = <Card title="Welcome!" paragraph="To this example" />

因此，在您的示例中，我假设您有一个名为 Home 的组件，应该这样定义

type HomeProps = {
  foo: string
}

export const Home= ({ foo }: HomeProps) => 
  <h2>{ foo }</h2>