Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Alterar o ponto de inicialização do react de "/" para "/login"

Hoje no meu arquivo App.js tenho o seguinte codigo.

<HashRouter>
        <ThemeProvider theme={theme}>
        <React.Suspense fallback={loading}>
          <Switch>
          <Route exact={true} path="/login" name="Login" component={Login}/>
          <Route path="/" name="Home" component={Layout} />
          </Switch>
        </React.Suspense>
        </ThemeProvider>
    </HashRouter>

Porém toda vez que eu inicio com "npm start" ele inicia no "/" como padrão mesmo. Como eu faço para alterar essa inicialização e inicar no "/login" ? Teria como fazer isso ?

1 resposta
solução!

Fala Christian, tudo bem?

O que acontece é que por padrão, qualquer página que entramos, se não especificarmos qual rota queremos ir, iremos para a rota / que é a rota padrão, porém existe um componente no react-router chamado Redirect em que você passa como atributo to="rota desejada" para redirecionar o usuario diretamente para a rota especificada, então o que você pode fazer é utilizar esse componente caso o usuario não estiver autenticado (que é o que eu imagino que você queira fazer) e utilizar o Layout caso ele esteja autenticado, veja:

<HashRouter>
        <ThemeProvider theme={theme}>
        <React.Suspense fallback={loading}>
          <Switch>
          <Route exact={true} path="/login" name="Login" component={Login}/>
          <Route 
                  path="/" 
                name="Home" 
                render={() => autenticado ? <Layout /> : <Redirect to="/login" />}  // Linha 9
          </Switch>
        </React.Suspense>
        </ThemeProvider>
    </HashRouter>

Na linha 9 utilizamos o render para renderizar o nosso componente de acordo se o usuário esta autenticado ou não, em que caso ele estiver, irá renderizar o componente Layout, caso não, renderiza o compontente Redirect o redirecionando para a página de login.

Métodos citados:

Você também pode ver um exemplo melhor na própria documentação, acesse-a clicando aqui

Espero ter ajudado, bons estudos :D

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software