Cómo configurar DefaultRoute a otra ruta en React Router

Tengo lo siguiente:

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

Cuando se usa DefaultRoute, SearchDashboard se procesa incorrectamente ya que cualquier * Dashboard debe procesarse dentro de Dashboard.

Me gustaría que mi DefaultRoute dentro de la ruta de la "aplicación" apunte a la ruta "searchDashboard". ¿Es esto algo que puedo hacer con React Router, o debería usar Javascript normal (para una redirección de página) para esto?

Básicamente, si el usuario va a la página de inicio, quiero enviarlo al panel de búsqueda. Así que supongo que estoy buscando una función de React Router equivalente awindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

Puede utilizar Redirect en lugar de DefaultRoute

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

Actualice 2019-08-09 para evitar problemas con la actualización, use esto en su lugar, gracias a Ogglas

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

El problema con el uso <Redirect from="/" to="searchDashboard" />es que si tiene una URL diferente, digamos, /indexDashboardy el usuario presiona actualizar o recibe una URL, el usuario será redirigido a de /searchDashboardtodos modos.

Si no desea que los usuarios puedan actualizar el sitio o enviar URL, use esto:

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

Use esto si searchDashboardestá detrás del inicio de sesión:

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

Intentaba incorrectamente crear una ruta predeterminada con:

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

Pero esto crea dos caminos diferentes que representan el mismo componente. Esto no solo es inútil, sino que puede causar fallas en su interfaz de usuario, es decir, cuando está diseñando <Link/>elementos basados ​​en this.history.isActive().

La forma correcta de crear una ruta predeterminada (que no sea la ruta de índice) es usar <IndexRedirect/>:

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

Esto se basa en react-router 1.0.0. Consulte https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js .

La respuesta de Jonathan no pareció funcionar para mí. Estoy usando React v0.14.0 y React Router v1.0.0-rc3. Esto hizo:

<IndexRoute component={Home}/>.

Entonces, en el caso de Matthew, creo que él querría:

<IndexRoute component={SearchDashboard}/>.

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

esto hará que cuando cargue el servidor en el host local, lo redireccionará a / algo

ACTUALIZACIÓN : 2020

En lugar de usar Redirect, simplemente agregue varias rutas en el path

Ejemplo:

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

Me encontré con un problema similar; Quería un controlador de ruta predeterminado si ninguno de los controladores de ruta coincidía.

Mi solución es usar un comodín como valor de ruta. es decir, también asegúrese de que sea la última entrada en la definición de sus rutas.

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

Para aquellos que llegan al 2017, esta es la nueva solución 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>

El método preferido es utilizar el componente IndexRoutes del enrutador react

Lo usa así (tomado de los documentos del enrutador de reacción vinculados anteriormente):

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

Lo usa así para redirigir a una URL en particular y representar el componente después de redirigir del enrutador antiguo al enrutador nuevo.

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