帶有 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>