Réagir le routeur avec différents modèles pour différentes routes v.5

Question

Salut, j'ai vu cette question et c'est exactement ce que je recherche mais je ne peux pas le faire fonctionner. Routeurs React Router V4 avec pages maîtres / modèles

J'utilise la version 5.2

Le composant d'application inclut la navigation et encapsule deux chemins avec deux composants de modèle, `` Public '' et `` Privé '' et lorsque je clique sur chaque lien, je m'attends à ce que cette page soit enveloppée par son modèle, mais à la place, seul le premier lien fonctionne et affiche le modèle. Le deuxième lien ne modifie que l'URL dans la barre d'adresse du navigateur et seul le contenu du premier modèle reste sur la page et le contenu de la deuxième page ne s'affiche pas. Si je change l'ordre des liens, seul le lien supérieur obtient le modèle correct.

C'est là que je définis les itinéraires et les liens vers eux.

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;

Mes modèles privés et publics sont les mêmes, sauf pour les titres l'un dit privé et l'autre public.

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;

Je cherchais quelque chose comme ça depuis un moment car cela ressemble à une solution potentiellement intéressante. Si quelqu'un sait comment résoudre ce problème, je l'apprécierais vraiment. Merci

Answer 1

Voici ce que fait SwitchComponent:

          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;
            }
          });

comme vous le voyez, le Switchcomposant ne se soucie que du premier niveau de ses enfants et recherche un accessoire appelé path or fromdans celui-ci. s'il ne le trouve pas, il suppose que tout pathcorrespondra. donc il montre toujours les premiers enfants quoi qu'il arrive.

ce que vous devez faire est de changer l'ordre des enfants comme ceci:

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