Reagieren Sie auf Router mit unterschiedlichen Vorlagen für unterschiedliche Routen. V. 5

Question

Hallo, ich habe diese Frage gesehen und genau das suche ich, aber ich kann sie nicht zum Laufen bringen. Reagieren Sie auf Router V4-Router mit Masterseiten / Vorlagen

Ich benutze Version 5.2

Die App-Komponente enthält die Navigation und umschließt zwei Pfade mit zwei Vorlagenkomponenten, "Öffentlich" und "Privat". Wenn ich auf jeden Link klicke, erwarte ich, dass diese Seite von der Vorlage umschlossen wird, aber stattdessen funktioniert nur der erste Link und zeigt die Vorlage. Der zweite Link ändert nur die URL in der Adressleiste des Browsers und nur der Inhalt der ersten Vorlage bleibt auf der Seite und der Inhalt der zweiten Seite wird nicht angezeigt. Wenn ich die Reihenfolge der Links ändere, erhält immer nur der Top-Link die richtige Vorlage.

Hier definiere ich die Routen und Links zu ihnen.

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;

Meine privaten und öffentlichen Vorlagen sind bis auf die Titel "privat" und "öffentlich" identisch.

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;

Ich habe eine Weile nach so etwas gesucht, da es nach einer potenziell netten Lösung aussieht. Wenn jemand weiß, wie man das behebt, würde ich es wirklich schätzen. Vielen Dank

Answer 1

Hier ist , was SwitchKomponente tut:

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

Wie Sie sehen, Switchkümmert sich die Komponente nur um die erste Ebene ihrer Kinder und sucht nach einer Requisite, die darin genannt wird path or from. Wenn es es nicht findet, wird davon ausgegangen, dass alle pathübereinstimmen. so zeigt es immer die ersten Kinder, egal was passiert.

Was Sie tun müssen, ist die Reihenfolge der Kinder wie folgt zu ändern:

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