將路徑參數傳遞給 Switch 中 Route 的 render() 函數 - React Router

Question

我的組件 CompanyProfile 是一個鈎子。 但我更喜歡將 switch 與 React Router 一起使用。 如何獲得:name是CompanyProfile的預期道具，我通過<Link />在 uri 中作為道具發送到我在渲染中指定的CompanyProfile組件？

const App = () => (
  <>
    <Switch>
      <Route
        exact
        path="/company/:name"
        render={(props:RouteComponentProps) => (
          <CompanyProfile {...props} findCompany={findCompany} />
        } />
    ...

我使用 render 的原因是我還需要將findCompany函數作為 prop 傳遞給組件。

在另一個組件中，我有一個指向這條路線的鏈接：

<Link to={`/company/${company.name}`} >
  <img alt="company profile image" src={companyUrl} />
</Link>

所以我試圖讓這個鏈接工作。

以防萬一這有幫助，這是我的整個 Switch：

const App = () => (
  <>
    <Switch>
      <Route component={withTracker(HomePageContainer)} exact path="/" />
      <Route component={Build} exact path="/build" />
      <Route
        exact
        path="/company/:name"
        render={(props:RouteComponentProps) => (
          <CompanyProfile {...props} findCompany={findCompany} />
        } />
        <Route
          component={withTracker(CompanyDetailContainer)}
          name="companydetail"
          path="/companies/:companyId/details" />
        <Route component={withTracker(InterviewContainer)} name="company" path="/interviews/companies/:companyId" />
        <Route component={withTracker(About)} name="about" path="/about" />
        <Route component={withTracker(Container)} path="/" />
        <Route component={withTracker(NotFound)} path="*" />
     </Switch>
  <RenderRoute />
</>
);

這是CompanyProfile.tsx一部分。 我嘗試了通過匹配道具獲取它的建議，但我仍然需要以某種方式輸入它，因為它還不理解match.params ：

    interface interface CrafterProfileProps {
        name: string;
        findCompany: (name: string) => Promise<Company>;
    }
    
    const CompanyProfile = (props: CompanyProfileProps) => {
        const { findCompany } = props;
        const { name } = props.match.params;
        const [company, setCompany] = useState<Company>();
...

我最后一次能夠匹配是使用 withRouter 但我不想使用這樣的 HOC。 這是一個 Hook 組件，所以有沒有一種方法可以將 TypeScript 類型添加到我的函數中，以便我在這里進行match ？

嘗試 2 （我也不太擅長 TS）這沒有用，它仍然抱怨它不知道匹配但是：

interface CompanyProfileProps {
    findCompany: (name: string) => Promise<Company>;
    props: RouteComponentProps<{ name?: string }>;
}

const CompanyProfile = (props: CompanyProfileProps) => {
    const { findCompany } = props;
    const { name } = props.props.match.params;

最終的

我無法輸入 TS 並在我的組件中工作，所以我選擇了答案提出的另一條路線，這就是有效的方法：

<Route
  exact
  path="/company/:name"
  render={(props:RouteComponentProps<{name: string}>) => {
    const { name } = props.match.params;
    return (<CompanyProfile findCompany={findCompany} name={name} />);
}} />

如果有人有更好的方法來做到這一點，我會全力以赴，但這現在有效！

Answer 1

CompanyProfile由Route的render prop render並且由於您正確地將路由 props傳遞給它，因此您可以簡單地通過match prop（ props.match.params.name ）訪問。

[編輯]

如果 Typescript 抱怨路由道具，您可以拉出匹配參數並傳遞給路由組件。 僅傳遞在您的界面中聲明的道具。

render={(props: RouteComponentProps) => {
  const { name } = props.match.params;
  return (
    <CompanyProfile
      findCompany={findCompany}
      name={name}
    />
  );
}}

另一種方法是聲明CompanyProfileProps和RouteComponentProps接口的聯合。 我對打字稿不是很熟悉，所以我不會假裝知道那里的語法，但我知道你可以做到。