Question

我有一条看起来像这样的路线，效果很好：

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

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

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

输入'{foo：string; }”不可分配给“ IntrinsicAttributes”类型＆{孩子们？：ReactNode; }'。属性“ foo”在类型上不存在 'IntrinsicAttributes＆{子代？：ReactNode; }'。 TS2322

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

我的Home组件如下所示：

type homeType = {
  foo: string
}

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

Answer 1

您的首页组件需要定义有将要发送给它的道具，即

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>

如何通过Typescript在React Router v5中传递道具路由？

1 个答案: