reactjs - Matchande URL-parametrar i Ionic med React

Jag utvecklar en FunctionalComponent som kommer att rendera en lista med objekt, i Ionic med React. Komponenten kommer att återanvändas för varje typ av objekts status. Jag skickar objektets status som en url-param.

Jag vill hämta url-param och visa det som listtitel och använda det för att anropa API:et för de matchade objekten. Vid renderingen av List-Component visas match för url-param som undefined.

Hur kan jag få URL-parametern i Component?

Länk till List-Page på Dashboard.tsx:

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

I PrivateRoute-komponenten placerade jag en console.log för props och det får parametern:

List.tsx:

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

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

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

Chromes konsolutdata:

Svar #1

Problemet var i PrivateRoute-komponenten som inte skickade vidare props. Detta är den fungerande versionen av komponenten:

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} />
  }} />
);