reactjs - Coincidencia de parámetros de URL en Ionic con React
Estoy desarrollando un FunctionalComponent que renderizará una lista de elementos, en Ionic con React. El componente se reutilizará para cada tipo de estado de los elementos. Estoy pasando el estado del elemento como un url-param.
Quiero obtener el url-param y mostrarlo como el Título de la Lista y usarlo para llamar a la API para los elementos coincidentes. Al renderizar el List-Component, el match del url param se muestra como indefinido.
¿Cómo puedo obtener el parámetro URL en el Componente?
Enlace a la List-Page en 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>
En el componente PrivateRoute coloqué un console.log para las props y está recibiendo el 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>
);
};
Salida de la consola de Chrome:
Respuesta #1
El problema estaba en el componente PrivateRoute que no pasaba las props. Esta es la versión funcional del 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} />
}} />
);

