[Problema] Não conseguimos acessar as rotas criadas no React

[narukaioh]

Descrição

Como vimos as rotas para login e orçamento estão apresentando o seguinte erro ao serem acessadas:

Hoje em dia o spring faz a administração das rotas e por causa disso existe um conflito quando criamos rotas com React. Precisamos hoje mudar a forma como criamos rotas com react. Hoje em dia usamos BrowserRouter e devemos passar a usar HashRouter para solucionar nosso problema, porem, ao trocar para HashRouter alguns links podem ser comprometidos, como os links do menu principal. Para esse card precisamos que tanto as rotas como os links funcionem devidamente.

Notas técnicas

• Entender como funciona o HashRoutes
• Entender como usar o pacote react-router-hash-link nas opções do menu principal

Critérios de aceitação

• [x] As rotas de login e orcamento devem estar funcionais
• [x] As opções do menu principal devem ter a mesmo efeito que as ancoras

Como testar

• [x] Acessar a página do descarte certo em QA
• [x] Digitar na URL /#login
• [x] Verificar se a pagina será renderizada sem o erro de whilelabel
• [x] Digitar na URL /#orcamentos
• [x] Verificar se a pagina será renderizada sem o erro de whilelabel
• [x] Verificar se as opções do menu principal estão funcionando devidamente

[dinelands]

incrível descrição de card!

[narukaioh]

Galera essa card vai se tornar mais simples do que eu imaginava. Vamos por partes...

Primeiramente, precisamos remover o <BrowserRouter> e substituir por <HashRouter> Em segundo momento, também precisamos parar de usar a dependência <Nav.Link> do pacote - ATENÇÃO - "react-bootstrap", precisamos utilizar o componente <Link> do pacote "react-router-dom" No mesmo site onde existe a documentação pro HashRouter, também está a documentação para o Link

Sobre as ancoras no menu principal tenho uma boa e uma má noticia:

1) Boa: vocês podem trocar facilmente por esse pacote: react-router-hash-link, importando dessa forma: import { HashLink as Link } from "react-router-hash-link" e trocando os antigos links Nav.Link por <Link to="/#...."> texto do seu link </Link> - ATENÇÃO em como digitar esse componente -

2) Má noticia, vocês vão ter que estilizar o menu de novo. Dica: basta so olhar a antiga classe que o Nav.Link tinha e colocar elas na nova tag <Link >

Fiz as modicações que cito aqui em um ambiente que criei para a aplicação e vejam só: https://descarte-certo-ju.herokuapp.com/ tentem fazer o passo a passo do teste nesse ambiente para voces verem que funciona bem

Qualquer duvida, me chamem! E sempre olhem se ficou warnings, consoles para trás