Reactjs 将Ionic中的url参数与React匹配

我正在开发一个

functional组件

，它将在

Ionic

中使用

React

呈现项目列表。对于每种类型的项目状态，都将重用该组件。我正在以

url参数

的形式传递项目的状态

我想获取

url参数

，并将其显示为列表标题，并使用它为匹配的项目调用API。呈现

列表组件

url参数的

匹配

呈现为未定义

如何在组件中获取url参数

链接到

列表页面
位于仪表板。tsx:

<IonCard className="card-body" href="/list/onschedule">

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

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

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

  return (
    <>
      <IonTitle>{match.params.status}</IonTitle>
  );
};

Chrome的控制台输出：

<IonCard className="card-body" href="/list/onschedule">

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

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

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

  return (
    <>
      <IonTitle>{match.params.status}</IonTitle>
  );
};

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

interface PrivateRouteProps extends RouteProps {
  component: any
}

export const PrivateRoute: FunctionComponent<PrivateRouteProps> = ({ component: Component, ...rest }) => (

<Route {...rest} render={props => {
    const currentUser: string | null  =  localStorage.getItem("userID");

    if (!userID) {
        // not logged in so redirect to login page with the return url
        return <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    }

    // authorised so return component
    return <Component {...props} />
  }} />
); 

接口PrivateRouteProps扩展了RouteProps{
组成部分：任何
}
export const PrivateRoute:FunctionComponent=（{component:component，…rest}）=>(
{
const currentUser:string | null=localStorage.getItem（“userID”）；
如果（！userID）{
//未登录，所以重定向到带有返回url的登录页面
返回
}
//授权销售订单退货部分
返回
}} />
); 
呈现列表组件url参数的匹配呈现为未定义。列表组件是如何呈现的？它作为独立组件呈现，或者在路径与声明的PrivateRoute的路径匹配时呈现？