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");
javascript
routes
reactjs
url-redirection
react-router
Matthew Herbst
quelle
quelle
Antworten:
Sie können Redirect anstelle von DefaultRoute verwenden
Update 2019-08-09, um Probleme mit der Aktualisierung zu vermeiden, verwenden Sie dies stattdessen dank Ogglas
quelle
from='/a' to='/a/:id'
, verwenden müssen<Switch>
, um Ihre<Redirect>
und<Route>
Komponente vom React-Router einzuschließen. Details siehe doc<Redirect exact from="/" to="/adaptation" />
exact
Flagge. Der akzeptierten Antwort fehlt das, so dass sie [fast] jeder Route entspricht.Das Problem bei der Verwendung
<Redirect from="/" to="searchDashboard" />
besteht darin, dass/indexDashboard
der Benutzer/searchDashboard
trotzdem 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:
Verwenden Sie diese Option, wenn Sie
searchDashboard
sich hinter dem Login befinden:quelle
Ich habe fälschlicherweise versucht, einen Standardpfad zu erstellen mit:
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 gestaltenthis.history.isActive()
.Der richtige Weg, um eine Standardroute zu erstellen (das ist nicht die Indexroute), ist folgende
<IndexRedirect/>
:Dies basiert auf React-Router 1.0.0. Siehe https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js .
quelle
Route
, etwas zu haben, das bereits von Ihnen erledigt wirdIndexRoute
?/
anstatt z/home
.<IndexRoute>
. Entschuldigung für den Lärm. stackoverflow.com/questions/32706913/… github.com/reactjs/react-router/blob/master/docs/guides/…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
quelle
SearchDashboard
wird die Komponente sein, die Sie sehen, wenn Sie auf der Homepage ankommen, aber nicht dieDashboard
Komponente, 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.Dadurch wird es so, dass Sie beim Laden des Servers auf dem lokalen Host zu / etwas weitergeleitet werden
quelle
UPDATE : 2020
Anstatt Redirect zu verwenden, fügen Sie einfach mehrere Routen in das Feld hinzu
path
Beispiel:
quelle
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.
quelle
Für diejenigen, die ins Jahr 2017 kommen, ist dies die neue Lösung mit
IndexRedirect
:quelle
quelle
DefaultRoute
inreact-router
v4?<Route exact path="/" component={Home}/>
. reacttraining.com/react-router/web/example/basicDie bevorzugte Methode ist die Verwendung der IndexRoutes- Komponente des Reaktionsrouters
Sie verwenden es folgendermaßen (entnommen aus den oben verlinkten React Router-Dokumenten):
quelle
Sie verwenden es so, um eine bestimmte URL umzuleiten und eine Komponente zu rendern, nachdem Sie vom alten zum neuen Router umgeleitet haben.
quelle