Pesquisa de site

reactjs - Correspondência de parâmetros de URL no Ionic com React


Estou desenvolvendo um FunctionalComponent que renderizará uma lista de itens, em Ionic com React. O componente será reutilizado para todo tipo de status de item. Estou passando o status do item como um url-param.

Eu quero obter o url-param e exibí-lo como o Título da Lista e usá-lo para chamar a API para os itens correspondentes. Ao renderizar o List-Component, o match do url param é exibido como indefinido.

Como posso obter o parâmetro da url no Componente?

Link para a List-Page em 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>

No componente PrivateRoute eu coloquei um console.log para os props e ele está recebendo o parâmetro:

List.tsx:

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

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

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

Saída do console do Chrome:

Resposta #1

O problema estava no componente PrivateRoute não repassando as props. Esta é a versão funcional do componente:

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