Como definir o DefaultRoute para outra rota no roteador React


98

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");


1
Já tentou usar Redirect em vez de DefaultRoute? <Redirect from = "/" to = "searchDashboard" />
Jonatan Lundqvist Medén

@ JonatanLundqvistMedén era exatamente isso que eu procurava, obrigado! Escreva como uma resposta e eu marcarei como correta. Desculpe pelo atraso na resposta.
Matthew Herbst

Respostas:


148

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

6
sou só eu, ou quando uso isso para acessar diretamente um url profundo, sempre sou redirecionado para o url "para", em vez da rota que estou tentando acessar?
Pablote de

Deve ser notado que se você estiver fazendo algum redirecionamento como from='/a' to='/a/:id', você precisará usar <Switch>para incluir seu componente <Redirect>e <Route>do roteador react. Detalhes, ver doc
Kulbear

1
@Kulbear eu tive o mesmo problema. Fazer o que Ogglas disse em sua resposta funcionou.
Alan P.

2
Para fazer funcionar, você provavelmente precisará colocar esta rota por último ou fazer isso<Redirect exact from="/" to="/adaptation" />
DarkWalker

É fácil supervisionar, então repito: a parte importante da regra de redirecionamento de DarkWalker é a exactbandeira. A resposta aceita está faltando, portanto, corresponde a [quase] qualquer rota.
dube

55

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"/>
  )
)}/>

37

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 .


De que adianta ter um Routea algo que já é gerenciado por você IndexRoute?
Matthew Herbst

1
Não faz sentido, e editei minha resposta para deixar claro que não estava defendendo isso.
Seth

Isso é o que eu também tenho feito, mas adoraria uma solução que fornecesse um componente (minha página inicial) em em /vez de ter que redirecionar para, por exemplo /home.
ericsoco

Parece que estou procurando, <IndexRoute>afinal. Desculpe pelo barulho. stackoverflow.com/questions/32706913/… github.com/reactjs/react-router/blob/master/docs/guides/…
ericsoco

11

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


Obrigado pela participação. Eu estava usando o React v0.13 e a versão do React-Router para isso, então uma versão pré-1.0 / rc. Espero que isso ajude outras pessoas!
Matthew Herbst,

Acho que isso te faz perder o contexto. SearchDashboardserá o componente que você verá quando chegar à página inicial, mas não o Dashboardcomponente que a envolve se for diretamente para /dashboard/searchDashboard. O React-router constrói dinamicamente uma hierarquia de componentes aninhados com base nas rotas correspondidas pela URL, então acho que você realmente precisa de um redirecionamento aqui.
Stijn de Witt

6
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


5

ATUALIZAÇÃO : 2020

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

Exemplo:

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

3

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>

3

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>

2
 <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 que é equivalente DefaultRouteno react-routerv4?
Anthony Kong

4
@AnthonyKong eu acho que é: <Route exact path="/" component={Home}/>. reacttraining.com/react-router/web/example/basic
TYMG

1

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>

0

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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.