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}