Reaccionar enrutador con diferentes plantillas para diferentes rutas v. 5

Jan 18 2021

Hola, he visto esta pregunta y esto es exactamente lo que estoy buscando, pero no puedo hacer que funcione. Enrutadores React Router V4 con páginas maestras / plantillas

Estoy usando la versión 5.2

El componente de la aplicación incluye la navegación y envuelve dos rutas con dos componentes de plantilla, 'Público' y 'Privado' y cuando hago clic en cada enlace, espero que la página esté envuelta por su plantilla, pero en cambio solo el primer enlace funciona y muestra la plantilla. El segundo enlace solo cambia la URL en la barra de direcciones del navegador y solo el contenido de la primera plantilla permanece en la página y el contenido de la segunda página no se muestra. Si cambio el orden de los enlaces, siempre solo el enlace superior obtiene la plantilla correcta.

Aquí es donde defino las rutas y los enlaces a ellas.

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul><li><Link to="/">Home</Link></li>
            <li><Link to="/members">Members</Link></li>
          </ul>
        </div>
        <Switch>
          <Public>
            <Route exact path="/"><Home /></Route>
          </Public>
          <Private>
            <Route path="/members"><Members /></Route>
          </Private>
        </Switch>
      </Router>
    );
  }
}
export default App;

Mis plantillas públicas y privadas son las mismas, excepto por los títulos, uno dice privado y el otro público.

class Private extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-2"><h2>PRIVATE</h2></div>
          <div className="col-md-8">{this.props.children}</div>
          <div className="col-md-2"></div>
        </div>
      </div>
    );
  }
}

export default Private;

He estado buscando algo como esto durante un tiempo, ya que parece una solución potencialmente ordenada. Si alguien sabe cómo solucionar este problema, se lo agradecería mucho. Gracias

Respuestas

1 TaghiKhavari Jan 18 2021 at 18:15

SwitchEsto es lo que hace Component:

          React.Children.forEach(this.props.children, child => {
            if (match == null && React.isValidElement(child)) {
              element = child;

              const path = child.props.path || child.props.from;

              match = path
                ? matchPath(location.pathname, { ...child.props, path })
                : context.match;
            }
          });

como ve, el Switchcomponente solo se preocupa por el primer nivel de sus hijos y busca un accesorio llamado path or fromasí. si no lo encuentra, asume que todos pathcoincidirán. por lo que siempre muestra a los primeros hijos pase lo que pase.

lo que debe hacer es cambiar el orden de los niños de esta manera:

<Switch>
  <Route exact path="/">
    <Public>
      <Home />
    </Public>
  </Route>
  <Route path="/members">
    <Private>
      <Members />
    </Private>
  </Route>
</Switch>