it-swarm.com.de

So legen Sie die DefaultRoute auf eine andere Route in React Router fest

Ich habe 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>

Bei Verwendung von DefaultRoute wird SearchDashboard falsch dargestellt, da * Dashboard innerhalb von Dashboard gerendert werden muss.

Ich möchte für meine DefaultRoute innerhalb der "App" Route auf die Route "searchDashboard" verweisen. Kann ich dies mit React Router tun, oder sollte ich dazu normales Javascript (für eine Seitenumleitung) verwenden? 

Wenn der Benutzer zur Startseite wechselt, möchte ich sie stattdessen an das Such-Dashboard senden. Ich schätze, ich bin auf der Suche nach einer React Router-Funktion, die window.location.replace("mygreathostname.com/#/dashboards/searchDashboard"); entspricht.

51
Matthew Herbst

Sie können Redirect anstelle von DefaultRoute verwenden

<Redirect from="/" to="searchDashboard" />

Ich habe falsch versucht, einen Standardpfad zu erstellen mit:

<IndexRoute component={DefaultComponent} />
<Route path="/default-path" component={DefaultComponent} />

Dadurch werden jedoch zwei verschiedene Pfade erstellt, die dieselbe Komponente darstellen. Dies ist nicht nur sinnlos, sondern kann auch zu Störungen in Ihrer Benutzeroberfläche führen, d. H. Wenn Sie <Link/>-Elemente basierend auf this.history.isActive() gestalten.

Die richtige Methode zum Erstellen einer Standardroute (nicht der Indexroute) besteht in der Verwendung von <IndexRedirect/>

<IndexRedirect to="/default-path" />
<Route path="/default-path" component={DefaultComponent} />

Dies basiert auf dem Reakt-Router 1.0.0. Siehe https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js .

37
Seth

Das Problem bei der Verwendung von <Redirect from="/" to="searchDashboard" /> ist, wenn Sie über eine andere URL verfügen, beispielsweise /indexDashboard und der Benutzer die Aktualisierung oder eine URL erhält, die an ihn gesendet wird. Der Benutzer wird trotzdem zu /searchDashboard weitergeleitet.

Wenn Sie nicht möchten, dass Sie die Website aktualisieren oder URLs senden können, verwenden Sie Folgendes:

<Route exact path="/" render={() => (
    <Redirect to="/searchDashboard"/>
)}/>

Verwenden Sie dies, wenn sich searchDashboard hinter dem Login befindet:

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/searchDashboard"/>
  ) : (
    <Redirect to="/login"/>
  )
)}/>
30
Ogglas

Jonathans Antwort schien für mich nicht zu funktionieren. Ich verwende React v0.14.0 und React Router v1.0.0-rc3. Dies tat:

<IndexRoute component={Home}/>.

Im Fall von Matthew glaube ich, dass er möchte:

<IndexRoute component={SearchDashboard}/>.

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

9
dwilt

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

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>
3
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>
2
user3889017

Die bevorzugte Methode ist die Verwendung der reaktiven Router IndexRoutes Komponente

Sie verwenden es so (entnommen aus den oben verlinkten Reaktordaten):

<Route path="/" component={App}>
    <IndexRedirect to="/welcome" />
    <Route path="welcome" component={Welcome} />
    <Route path="about" component={About} />
</Route>
1
Marc Costello
import { Route, Redirect } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div>
        <Route path='/'>
          <Redirect to="/something" />
        </Route>
//rest of code here

dies bewirkt, dass Sie beim Laden des Servers auf dem lokalen Host zu/etwas weitergeleitet werden 

1
user2785628

Ich bin auf ein ähnliches Problem gestoßen. Ich wollte einen Standardroutenhandler, wenn keiner der Routenhandler übereinstimmte.

Meine Lösungen sind die Verwendung eines Platzhalters als Pfadwert. dh Stellen Sie außerdem sicher, dass es der letzte Eintrag in Ihrer Routendefinition ist.

<Route path="/" component={App} >
    <IndexRoute component={HomePage} />
    <Route path="about" component={AboutPage} />
    <Route path="home" component={HomePage} />
    <Route path="*" component={HomePage} />
</Route>
0
Anextro