So setzen Sie die DefaultRoute in React Router auf eine andere Route

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 der DefaultRoute wird SearchDashboard falsch gerendert, da jedes * Dashboard im Dashboard gerendert werden muss.

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

Wenn der Benutzer zur Startseite geht, möchte ich ihn grundsätzlich an das Such-Dashboard senden. Ich suche also nach einer React Router-Funktion, die der entsprichtwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

Sie können Redirect anstelle von DefaultRoute verwenden

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

Update 2019-08-09, um Probleme mit der Aktualisierung zu vermeiden, verwenden Sie dies stattdessen dank Ogglas

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

Das Problem bei der Verwendung <Redirect from="/" to="searchDashboard" />besteht darin, dass /indexDashboardder Benutzer /searchDashboardtrotzdem umgeleitet wird, wenn Sie beispielsweise eine andere URL haben und der Benutzer auf Aktualisieren klickt oder eine URL an ihn gesendet bekommt .

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

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

Verwenden Sie diese Option, wenn Sie searchDashboardsich hinter dem Login befinden:

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

Ich habe fälschlicherweise 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 rendern. Dies ist nicht nur sinnlos, sondern kann auch zu Störungen in Ihrer Benutzeroberfläche führen, dh wenn Sie <Link/>Elemente basierend auf gestalten this.history.isActive().

Der richtige Weg, um eine Standardroute zu erstellen (das ist nicht die Indexroute), ist folgende <IndexRedirect/>:

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

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

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}/>.

In Matthews Fall glaube ich, dass er Folgendes möchte:

<IndexRoute component={SearchDashboard}/>.

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

import { Route, Redirect } from "react-router-dom";

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

Dadurch wird es so, dass Sie beim Laden des Servers auf dem lokalen Host zu / etwas weitergeleitet werden

UPDATE : 2020

Anstatt Redirect zu verwenden, fügen Sie einfach mehrere Routen in das Feld hinzu path

Beispiel:

<Route exact path={["/","/defaultPath"]} component={searchDashboard} />

Ich bin auf ein ähnliches Problem gestoßen; Ich wollte einen Standard-Routen-Handler, wenn keiner der Routen-Handler übereinstimmt.

Meine Lösung besteht darin, einen Platzhalter als Pfadwert zu verwenden. Stellen Sie außerdem sicher, dass dies 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>

Für diejenigen, die ins Jahr 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>

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

Die bevorzugte Methode ist die Verwendung der IndexRoutes- Komponente des Reaktionsrouters

Sie verwenden es folgendermaßen (entnommen aus den oben verlinkten React Router-Dokumenten):

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

Sie verwenden es so, um eine bestimmte URL umzuleiten und eine Komponente zu rendern, nachdem Sie vom alten zum neuen Router umgeleitet haben.

<Route path="/old-router">
  <Redirect exact to="/new-router"/>
  <Route path="/new-router" component={NewRouterType}/>
</Route>