Como definir o DefaultRoute para outra rota no roteador React

Eu tenho o seguinte:

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

Ao usar o DefaultRoute, SearchDashboard é renderizado incorretamente, pois qualquer * Dashboard precisa ser renderizado dentro do Dashboard.

Eu gostaria que meu DefaultRoute dentro da rota "app" apontasse para a rota "searchDashboard". É algo que posso fazer com o React Router ou devo usar Javascript normal (para um redirecionamento de página) para isso?

Basicamente, se o usuário for para a página inicial, quero enviá-lo para o painel de pesquisa. Acho que estou procurando por um recurso React Router equivalente awindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

Você pode usar Redirect em vez de DefaultRoute

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

Atualize 09-08-2019 para evitar problemas com a atualização, em vez disso, graças à Ogglas

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

O problema com o uso <Redirect from="/" to="searchDashboard" />é se você tiver uma URL diferente, digamos, /indexDashboarde o usuário clicar em atualizar ou receber uma URL enviada para ele, o usuário será redirecionado de /searchDashboardqualquer maneira.

Se você não deseja que os usuários atualizem o site ou enviem URLs, use:

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

Use se searchDashboardestiver atrás de login:

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

Eu estava tentando criar um caminho padrão incorretamente com:

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

Mas isso cria dois caminhos diferentes que renderizam o mesmo componente. Isso não só é inútil, mas pode causar falhas em sua IU, ou seja, quando você está estilizando <Link/>elementos com base em this.history.isActive().

A maneira certa de criar uma rota padrão (que não é a rota do índice) é usar <IndexRedirect/>:

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

Isso é baseado no react-router 1.0.0. Consulte https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js .

A resposta de Jonathan não pareceu funcionar para mim. Estou usando o React v0.14.0 e o React Router v1.0.0-rc3. Isso fez:

<IndexRoute component={Home}/>.

Portanto, no caso de Matthew, acredito que ele desejaria:

<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

isso fará com que quando você carregar o servidor no host local, ele irá redirecioná-lo para / algo

ATUALIZAÇÃO : 2020

Em vez de usar Redirecionar, basta adicionar várias rotas no path

Exemplo:

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

Eu tive um problema semelhante; Eu queria um manipulador de rota padrão se nenhum dos manipuladores de rota correspondesse.

Minhas soluções são usar um caractere curinga como o valor do caminho. ou seja, certifique-se também de que é a última entrada em sua definição de rotas.

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

Para quem chega em 2017, esta é a nova solução com 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>

O método preferencial é usar o componente Reac router IndexRoutes

Você o usa assim (retirado dos documentos do roteador react vinculados acima):

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

Você o usa assim para redirecionar em uma URL específica e renderizar o componente após redirecionar do roteador antigo para o novo.

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