Come impostare DefaultRoute su un'altra rotta in React Router

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 DefaultRoute, SearchDashboard viene visualizzato in modo errato poiché qualsiasi * Dashboard deve essere visualizzato all'interno di Dashboard.

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

Fondamentalmente, se l'utente va alla home page, voglio inviarlo invece alla dashboard di ricerca. Quindi immagino di cercare una funzionalità React Router equivalente awindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

Puoi usare Redirect invece di DefaultRoute

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

Aggiorna 2019-08-09 per evitare problemi con l'aggiornamento, usa invece questo, grazie a Ogglas

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

Il problema con l'utilizzo <Redirect from="/" to="searchDashboard" />è che se hai un URL diverso, ad esempio /indexDashboarde l'utente preme Aggiorna o riceve un URL inviato a loro, l'utente verrà reindirizzato /searchDashboardcomunque.

Se non vuoi che gli utenti possano aggiornare il sito o inviare URL, usa questo:

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

Usa questo se searchDashboardè dietro il login:

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

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 questo è inutile, ma può causare anomalie nella tua interfaccia utente, ad esempio, quando stai disegnando <Link/>elementi basati su this.history.isActive().

Il modo giusto per creare una rotta predefinita (che non è la rotta dell'indice) è usare <IndexRedirect/>:

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

Si basa su React-Router 1.0.0. Vedi https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js .

La risposta di Jonathan non sembrava 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 Matthew, credo che vorrebbe:

<IndexRoute component={SearchDashboard}/>.

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

questo farà in modo che quando caricherai il server sull'host locale ti reindirizzerà a / qualcosa

AGGIORNAMENTO : 2020

Invece di utilizzare Redirect, aggiungi semplicemente più percorsi nel file path

Esempio:

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

Mi sono imbattuto in un problema simile; Volevo un gestore di rotte predefinito se nessuno dei gestori di rotte corrispondeva.

La mia soluzione consiste nell'usare un carattere jolly come valore del percorso. cioè assicurati anche che sia l'ultima voce nella definizione dei percorsi.

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

Per chi arriva nel 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>

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

Il metodo preferito consiste nell'usare il componente IndexRoutes del router reattivo

Lo usi in questo modo (tratto dai documenti del router react collegati sopra):

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

Lo usi in questo modo per reindirizzare su un particolare URL e renderizzare il componente dopo il reindirizzamento dal vecchio router al nuovo router.

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