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

98

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

Matthew Herbst
quelle
1
Haben Sie versucht, Redirect anstelle von DefaultRoute zu verwenden? <Redirect from = "/" to = "searchDashboard" />
Jonatan Lundqvist Medén
@ JonatanLundqvistMedén genau das habe ich gesucht, danke! Schreiben Sie es als Antwort und ich werde es als richtig markieren. Entschuldigung für die verspätete Antwort.
Matthew Herbst

Antworten:

148

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" />
Jonatan Lundqvist Medén
quelle
6
bin ich es nur, oder wenn ich dies verwende, um eine tiefe URL direkt zu treffen, werde ich immer zur "to" -URL weitergeleitet, anstatt zu der Route, die ich zu treffen versuche?
Pablote
Sollte beachtet werden, dass Sie, wenn Sie eine Umleitung wie durchführen from='/a' to='/a/:id', verwenden müssen <Switch>, um Ihre <Redirect>und <Route>Komponente vom React-Router einzuschließen. Details siehe doc
Kulbear
1
@ Kulbear Ich hatte das gleiche Problem. Das zu tun, was Ogglas in seiner Antwort sagte, funktionierte.
Alan P.
2
Damit es funktioniert, müssen Sie höchstwahrscheinlich diese Route zuletzt setzen oder dies tun<Redirect exact from="/" to="/adaptation" />
DarkWalker
Es ist leicht zu überwachen, daher wiederhole ich: Der wichtige Teil der RedWect-Regel von DarkWalker ist die exactFlagge. Der akzeptierten Antwort fehlt das, so dass sie [fast] jeder Route entspricht.
Dube
55

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"/>
  )
)}/>
Ogglas
quelle
37

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 .

Seth
quelle
Was bringt es Route, etwas zu haben, das bereits von Ihnen erledigt wird IndexRoute?
Matthew Herbst
1
Es hat keinen Sinn, und ich habe meine Antwort bearbeitet, um klar zu machen, dass ich das nicht befürworte.
Seth
Dies ist, was ich auch getan habe, aber ich würde eine Lösung lieben, die eine Komponente (meine Homepage) bereitstellt, /anstatt z /home.
Ericsoco
Sieht so aus, als würde ich doch suchen <IndexRoute>. Entschuldigung für den Lärm. stackoverflow.com/questions/32706913/… github.com/reactjs/react-router/blob/master/docs/guides/…
ericsoco
11

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

dwilt
quelle
Danke für den Anteil. Ich habe dafür React v0.13 und die Version von React-Router verwendet, also eine Version vor 1.0 / rc. Hoffe das hilft anderen!
Matthew Herbst
Ich denke, das lässt dich den Kontext verlieren. SearchDashboardwird die Komponente sein, die Sie sehen, wenn Sie auf der Homepage ankommen, aber nicht die DashboardKomponente, die sie umschließt, wenn Sie direkt zu gehen /dashboard/searchDashboard. React-Router baut dynamisch eine Hierarchie verschachtelter Komponenten auf, basierend auf den Routen, die mit der URL übereinstimmen. Ich denke, Sie brauchen hier wirklich eine Umleitung.
Stijn de Witt
6
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


quelle
4

UPDATE : 2020

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

Beispiel:

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

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>
devil_io
quelle
3

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>
Kevin Hernandez
quelle
2
 <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>
user3889017
quelle
Was entspricht DefaultRoutein react-routerv4?
Anthony Kong
4
@AnthonyKong Ich denke es ist : <Route exact path="/" component={Home}/>. reacttraining.com/react-router/web/example/basic
TYMG
1

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>
Marc Costello
quelle
0

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