Reagieren v4 Router Verschachtelte Routen mit Schalter

Versuchen das folgende zu tun, aber es funktioniert nicht.

ReactDOM.render(
  <Router>
    <div className="route-wrapper">
      <Switch>
        <App>
          <Route exact path="/" component={HomePage} />
          <Route path="/user" component={UserPage} />
        </App>
        <Route component={Err404} />
      </Switch>
    </div>
  </Router>,
  document.getElementById('main')
)

Wie die Dokumentation sagt nur weiterleiten und Umleiten von Elementen sind erlaubt, innerhalb eines Switch-element. Wie bekomme ich diese zu arbeiten, ohne explizit wrapping HomePage und Benutzerseite in der App oder mit den Fehler-Seite eingebundenes App?

  • Was hindert Sie, das einwickeln der <Switch - > mit dem <App> Komponente?
  • Die App-Komponente enthält die header, navbar und was Inhalt ist in der route. Ich will nicht die header und die navbar zu werden, gibt es auf der 404-Seite.
  • dann würde ich die Nutzung ein <Route-Komponente={App} /> für die Anzeige Ihrer App Teil und im inneren der App können Sie die routing-zwischen Startseite und der user-Seite. das ist der v4 Weg, dies zu tun
InformationsquelleAutor Okinawa Terminal | 2017-05-07
  1. 17

    Während ich begonnen habe die Entwicklung einer "Universal app Reagieren", wo der erste laden der Seite erfolgt mit server-side-rendering, ich habe vor ähnlichen problem, wie die Reagieren-Router hatte gerade aktualisiert auf 4.0. Sie sollten erwägen, die Umstrukturierung Sie die Anwendung so etwas wie unten angegeben:

    ReactDOM.render(
  <Router>
    <div className="route-wrapper">
      <Switch>
        <Route path="/" component={App} />
        <Route component={Err404} />
      </Switch>
    </div>
  </Router>,
  document.getElementById('main')
)

    Wo die App-Komponente ist Refactoring wie folgt:

    class App extends React.Component {
  render() {
    return <div>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/user" component={UserPage} />
      </Switch>
    </div>;
  }
}
    • Zu diesem Beispiel: Ist es überhaupt möglich zu erreichen Err404 Komponente? Die erste Route passt alles und lädt die App-Komponente, in dem Fall würde die Err404 Komponente geladen? Es erkennt nicht, wenn keine übereinstimmung gefunden wurde in den nachfolgenden Schalter, nicht wahr?
    • Vereinbart. Ich glaube nicht, dass das funktionieren wird - die Err404 Komponente nie machen.
    • Das sieht aus wie eine mögliche Lösung: stackoverflow.com/questions/41474134/...
    • kann ich <switch> mit <Route> im inneren funktionale Komponente, wie zu benutzen?
    InformationsquelleAutor Rahul Sethi
Schreibe einen Kommentar