Estoy configurando el enrutamiento usando react-router y el gancho useRouteMatch. No puedo cargar un componente porque la ruta aún es diferente a la URL, pero me pregunto por qué. Porque, como puede ver, la URL en el navegador me dice que debería coincidir, pero luego, cuando registro el valor de 'url' de useRouteMatch(), todavía está un paso atrás.
url en el navegador será 'http://localhost:3000/compliance/546545/BeleggersProfiel/Profiel', sin embargo, cuando registre el valor 'url' de useRouteMatch, dirá http://localhost:3000/compliance/546545/BeleggersProfiel , así que un paso atrás.
Si registro la ruta a continuación ingresada en el elemento Ruta, es '/compliance/:compliance_id/BeleggersProfiel/:substep', por lo que debería coincidir con la URL en el navegador, pero no es así. ¿Alguien sabe por qué la URL no está actualizada?
export const routes = [ { path: '/:substep', Component: SubSteps, }, ]; function SubWizardRoutes({ steps, wizardRoutes = routes }) { const { push, location } = useHistory(); const { url, path: basePath } = useRouteMatch(); // when we entered the app and fetched the steps, proceed to the first step if (location.pathname === url && steps.length > 0) { push(`${url}/${steps[0].name}`); } return ( <Switch> {wizardRoutes.map((route) => { const { Component, path } = route; return ( <Route path={`${basePath}${path}`} render={({ ...rest }) => { return <Component steps={steps} {...rest} />; }} /> ); })} </Switch> ); } export default SubWizardRoutes;Creo que no necesita useRouteMatch para proceed the first step . Por favor, inténtalo
const { substep } = useParams() const isBeforeFirstStep = substep === undefined && steps.length > 0 if (isBeforeFirstStep) { const nextURL = `${url}/${steps[0].name}` push(nextURL) }