Come impostare il defaultroute ad un'altra rotta in Reagire Router

Question

Ho il seguente:

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

Quando si utilizza il defaultroute, SearchDashboard rende in modo non corretto dal momento che ogni * Dashboard ha bisogno di rendering all'interno del cruscotto.

Vorrei che il mio DefaultRoute all'interno della "app" Route per puntare al Route "searchDashboard". È qualcosa che posso fare con React Router, o dovrei usare il normale Javascript (per un reindirizzamento di pagina) per questo?

In pratica, se l'utente accede alla pagina iniziale, desidero inviarli al pannello di ricerca. Quindi credo che sto cercando un Reagire Router funzione equivalente a window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

Answer 1

È possibile utilizzare al posto di reindirizzamento defaultroute

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

Answer 2

risposta di Jonathan non sembra funzionare per me. Sto usando React v0.14.0 e React Router v1.0.0-rc3. Questo ha fatto:

<IndexRoute component={Home}/>.

Quindi, nel caso di Matteo, credo che avrebbe voluto:

<IndexRoute component={SearchDashboard}/>.

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

Answer 3

stavo erroneamente cercando di creare un percorso predefinito con:

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

Ma questo crea due percorsi diversi che rendono lo stesso componente. Non solo è inutile, ma può causare problemi nell'interfaccia utente, ad esempio quando si modellano gli elementi <Link/> in base a this.history.isActive().

Il modo giusto per creare un percorso predefinito (che non è il percorso indice) è quello di utilizzare <IndexRedirect/>:

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

Questo si basa sul reagirà-router 1.0.0. Vedi https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js.

Answer 4

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

Answer 5

Il metodo preferito è quello di utilizzare il reagire router IndexRoutes componente

si utilizza in questo modo (dati tratti dal reagire documentazione router collegati sopra):

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

Answer 6

mi sono imbattuto in una simile problema; Volevo un gestore di route predefinito se nessuno del gestore di percorsi corrispondeva.

Le mie soluzioni consiste nell'utilizzare un carattere jolly come valore del percorso. cioè Assicurati anche che sia l'ultima voce nella tua definizione di rotte.

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

Answer 7

Il problema con l'utilizzo <Redirect from="/" to="searchDashboard" /> è se si dispone di un URL diverso, diciamo /indexDashboard e l'utente preme aggiorna o ottiene un URL inviato a loro, l'utente verrà reindirizzato alla /searchDashboard comunque.

Se wan't agli utenti di essere in grado di aggiornare il sito o inviare URL usano questo:

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

Utilizzare questo se searchDashboard è dietro login:

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

Answer 8

Per chi proviene in 2017 , questa è la nuova soluzione con IndexRedirect:

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