Wie setze ich die DefaultRoute auf eine andere Route in React Router

Habe ich Folgendes:

  <Route name="app" path="/" handler={App}>
    <Route name="dashboards" path="dashboards" handler={Dashboard}>
      <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} />
      <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} />
      <DefaultRoute handler={DashboardExplain} />
    </Route>
    <DefaultRoute handler={SearchDashboard} />
  </Route>

Wenn mit der DefaultRoute, SearchDashboard rendert falsch, da jede *Dashboard muss gerendert im Dashboard.

Ich würde gerne für meine DefaultRoute in der "app" - Route auf der Route "searchDashboard". Ist das etwas, was ich tun kann, Reagieren mit Router, oder sollte ich normalen Javascript (für eine Seite umleiten)?

Grundsätzlich, wenn der Benutzer geht auf die Homepage, ich möchte Ihnen statt der Suche dashboard. Also ich denke, ich bin auf der Suche nach einem Reagieren, Router-Funktion entspricht window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

InformationsquelleAutor der Frage Matthew Herbst | 2015-04-10

57

Können Sie Umleiten, anstatt DefaultRoute
```
<Redirect from="/" to="searchDashboard" />
```
InformationsquelleAutor der Antwort Jonatan Lundqvist Medén
34

Ich war falsch zu versuchen, um eine default-Pfad mit:
```
<IndexRoute component={DefaultComponent} />
<Route path="/default-path" component={DefaultComponent} />
```
Aber das schafft zwei verschiedene Wege, die machen die gleiche Komponente. Dies ist nicht nur sinnlos, sondern kann es zu Pannen in der Benutzeroberfläche, d.h., wenn Sie styling <Link/> Elemente, basierend auf this.history.isActive().

Den richtigen Weg zu erstellen Sie eine default-route (das ist nicht die index-route) ist die Verwendung <IndexRedirect/>:
```
<IndexRedirect to="/default-path" />
<Route path="/default-path" component={DefaultComponent} />
```
Diese basiert auf reagieren-router 1.0.0. Sehen https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js.

InformationsquelleAutor der Antwort Seth
21

Das problem bei der Verwendung <Redirect from="/" to="searchDashboard" /> ist, wenn Sie eine andere URL, sagen /indexDashboard und der Nutzer die Aktualisierung oder bekommt eine URL, die an Sie gesendet, wird der Benutzer umgeleitet, um /searchDashboard sowieso.

Wenn Sie wan ' T Benutzer in der Lage sein, aktualisieren Sie die Seite oder senden Sie URLs verwenden:
```
<Route exact path="/" render={() => (
    <Redirect to="/searchDashboard"/>
)}/>
```
Verwenden Sie dies, wenn searchDashboard hinter login:
```
<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/searchDashboard"/>
  ) : (
    <Redirect to="/login"/>
  )
)}/>
```
InformationsquelleAutor der Antwort Ogglas
9

Jonathan ' s Antwort scheint nicht für mich arbeiten. Ich bin mit Reagieren v0.14.0 und Reagieren Router v1.0.0-rc3. Dies Tat:

<IndexRoute component={Home}/>.

So, in Matthäus der Fall, ich glaube, er würde wollen:

<IndexRoute component={SearchDashboard}/>.

Quelle: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md

InformationsquelleAutor der Antwort dwilt

Für diejenigen, die in 2017-das ist die neue Lösung mit IndexRedirect:

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>

InformationsquelleAutor der Antwort Kevin Hernandez

 <Route name="app" path="/" handler={App}>
    <Route name="dashboards" path="dashboards" handler={Dashboard}>
      <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} />
      <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} />
      <DefaultRoute handler={DashboardExplain} />
    </Route>
    <Redirect from="/*" to="/" />
  </Route>

InformationsquelleAutor der Antwort user3889017

1

Die bevorzugte Methode ist der router reagieren IndexRoutes Komponente

Verwenden Sie es wie folgt (entnommen aus der router reagieren docs weiter oben verlinkt):
```
<Route path="/" component={App}>
    <IndexRedirect to="/welcome" />
    <Route path="welcome" component={Welcome} />
    <Route path="about" component={About} />
</Route>
```
InformationsquelleAutor der Antwort Marc Costello
0

Ich lief in ein ähnliches Problem, ich wollte eine Standard-route-handler, wenn keine der route-handler abgestimmt.

Meine Lösung ist die Verwendung einer wildcard als der Wert für path. ie
Auch stellen Sie sicher, es ist der Letzte Eintrag in der Route-definition.
```
<Route path="/" component={App} >
    <IndexRoute component={HomePage} />
    <Route path="about" component={AboutPage} />
    <Route path="home" component={HomePage} />
    <Route path="*" component={HomePage} />
</Route>
```
InformationsquelleAutor der Antwort Anextro

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.