reactjs - Rutas anidadas que no se procesan con React Router v4

react-router react-router-v4

Question

Estoy tratando de agrupar algunas de mis rutas junto con React Router v4 para limpiar algunos de mis componentes. Por ahora solo quiero agrupar mis rutas no iniciadas y mis rutas de administrador agrupadas, pero lo siguiente no funciona.

main.js

const Main = () => {
return (
<main>
<Switch>
<Route exact path=''/'' component={Public} />
<Route path=''/admin'' component={Admin} />
</Switch>
</main>
);
};
export default Main;

public.js

const Public = () => {
return (
<Switch>
<Route exact path=''/'' component={Greeting} />
<Route path=''/signup'' component={SignupPage} />
<Route path=''/login'' component={LoginPage} />
</Switch>
);
};
export default Public;

El componente Saludo se muestra en "localhost: 3000 /", pero el componente SignupPage no se muestra en "localhost: 3000 / signup" y el componente de inicio de sesión no se muestra en "localhost: 3000 / signup". Mirando las herramientas React Dev estas dos rutas devuelven Null.

Answer 1

El motivo es muy obvio. para su ruta en main.js, ha especificado la ruta de ruta del componente Public con la exact path=''/'' exacta exact path=''/'' y luego, en el componente público, está haciendo coincidir las otras Routes . Entonces, si la ruta de la ruta es /signup , al principio la ruta no es exacta, por lo que el componente Public no se representa y, por lo tanto, no lo harán las subrutas.

Cambie la configuración de su ruta a la siguiente

main.js

const Main = () => {
return (
<main>
<Switch>
<Route path=''/'' component={Public} />
<Route path=''/admin'' component={Admin} />
</Switch>
</main>
);
};
export default Main

public.js

const Public = () => {
return (
<Switch>
<Route exact path=''/'' component={Greeting} />
<Route path=''/signup'' component={SignupPage} />
<Route path=''/login'' component={LoginPage} />
</Switch>
);
};

Además, cuando especifique las rutas anidadas, estas deben estar relacionadas con la ruta principal, por ejemplo, si la ruta principal es /home y luego en la ruta secundaria que desea escribir /dashboard . Debería escribirse como

<Route path="/home/dashboard" component={Dashboard}

o mejor

<Route path={`${this.props.match.path}/dashboard`} component={Dashboard}