使用React匹配Ionic中的URL参数

Question

我正在开发FunctionalComponent，它将以Ionic和React呈现项目列表。该组件将重新用于每种类型的项目状态。我正在将项目的状态传递为url-param。

我想获取url-param并将其显示为列表标题，并使用它来调用匹配项的API。将List-Component url参数的match渲染为未定义。

如何获取Component中的url参数？

在Dashboard.tsx：处链接到List-Page

<IonCard className="card-body" href="/list/onschedule">
App.tsx：

<IonRouterOutlet>
    <Route exact path="/login" component={Login} />
    <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
    <PrivateRoute path="/dashboard" component={Dashboard} exact={true} />
    <PrivateRoute path="/list/:status" component={List} />
</IonRouterOutlet>
在PrivateRoute组件中，我为道具放置了console.log，并获得了参数：

List.tsx：

interface StatusMatchProps extends RouteComponentProps<{
  status: string;
}> {}

const List: React.FunctionComponent<StatusMatchProps> = ({match}) => {
  console.log("match: " + match)

  return (
    <>
      <IonTitle>{match.params.status}</IonTitle>
  );
};
Chrome的控制台输出：

我正在开发带有React的Ionic中将呈现项目列表的FunctionalComponent。该组件将重新用于每种类型的项目状态。我正在将商品的状态作为url-param传递。 ...

Answer 1

问题出在PrivateRoute组件未通过道具。这是组件的工作版本：