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

