3

Estou criando uma app em NodeJs, React & Redux aqui na empresa. E tenho uma página que é a Content, nela tenho duas barras de navegação e uma área comum para o conteúdo. Nesta área comum estou utilizando o Switch para controlar as rotas, mas quero que uma rota (componente) entre logo quando a app é carregada, ou seja, seja a default, mas não estou encontrando documentação sobre isso, pode me ajudar, abaixo segue o código.

import React, { Fragment } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Navbar from './Navbar';
import Topnavbar from './Topnavbar';
import Dashboard from './Dashboard';
import Profile from './Profile';

const Content = () => {
  return (
    <Router>
      <Fragment>
        <div id='wrapper'>
          <Navbar />
          <div id='content-wrapper' className='d-flex flex-column'>
            <div id='content'>
              <Topnavbar />
              <Switch>
                <Route exact path='/dashboard' component={Dashboard} />
                <Route exact path='/profile' component={Profile} />
              </Switch>
            </div>
          </div>
        </div>
      </Fragment>
    </Router>
  );
};

export default Content;

Quero que o componente Dashboard seja o default. Como determinar que uma rota é a default no switch?

Obrigado.

2 Respostas 2

2

Você pode usar o componente Redirect.

Fica algo assim:

<Switch>
 <Route exact path='/dashboard' component={Dashboard} default />
 <Route exact path='/profile' component={Profile} />
 <Redirect exact from="/" to="/dashboard"/> 
</Switch>

Isso significa que quando a aplicação carregar (normalmente isso começa com "/") então você vai redirecionar para o "/dashboard".

Há também uma outra forma, que funcionava na v4 do react-router, mas não tenho certeza na v5.

<Switch>
  <Route exact path='/dashboard' component={Dashboard} default />
  <Route exact path='/profile' component={Profile} />
  <Route render={() => <Redirect to="/dashboard"/>}/>
</Switch>

Colocar um componente Route sem path fará ele ser executado sempre. No entanto, como nesse caso ele se encontra na última ordem dentro de um switch, ele só será executado caso não passo por nenhum outro Route anterior.

Em outras palavras, caso o path vá para algum diferente de "/dashboard" ou "/profile" ele vai redirecionar para "/dashboard" sempre.

2
  • Obrigado Andrew, Utilizei o Redirect mas ao invés de uma "/" usei o "/content" to "/dashboard" por que minha aplicação usa o "/" para ir sempre para o login, uma vez que ela roda em uma intranet e tem a necessidade de sempre fazer o login para acessa-la.
    – user152677
    17/01/2020 às 15:02
  • Que bom que deu certo. 😁 17/01/2020 às 15:08
0

Tente fazer isso:

<Switch>
    <Route path="/sua rota" exact component={seu componente aqui} />
</Switch>

Você deve fazer log-in para responder a esta pergunta.