React Router

Question 1

React router

Answer 1

é um pacote não nativo do React, serve para criar estrutura de Rotas da aplicação.

Serve para a aplicação ter varias paginas;

npm i react-routerd

Question 2

Pra começar com o React Router

Answer 2

precisamos importar 3 componentes de 'react-router-dom;
BrowserRoute: É o componente pai, que irá sincronizar a url com os demais componentes, armazenando dados de historico
O BrowserRoute também limita a area de mudança dos componentes dinamicos (Troca de paginas), tudo fora dele permanece intacto, como uma master page;
Routes
Route

import {BrowserRoute, Routes, Route} from 'react-router-dom';

<div>
	<H1>Tudo fora do Browser será repetido, como uma master page</H1>
	<BrowserRoute>
		<Routes>
			<Route path="/" element={<Home />} />
			<Route path="/QuemSomos" element={<QuemSomos />} />
			<Route path="/Lojas" element={<Lojas />} />
		</Routes>
	</BrowserRoute>
</div>

Question 3

Para Navegar entra paginas (Componentes utilizando o BrowserRoute, Routes e Route;

Answer 3

Precisamos usar o componente Link;

import {Link} from 'react-router-dom';

<Link to="/QuemSomos">Quem Somos</Link>

<BrowserRoute>

	/*Posso colocar codigo repetido em cada rota aqui, fora de Routes*/
	<Link to="/QuemSomos">Quem Somos</Link> 
	
	<Routes>
		<Route path="/" element={<Home />} />
		<Route path="/QuemSomos" element={<QuemSomos />} />
		<Route path="/Lojas" element={<Lojas />} />
	</Routes>
	
</BrowserRoute>

Question 4

Rotas Dinamicas

Answer 4

Basta criar uma nota Rota <Route>

<BrowserRoute>
	<Routes>
		<Route path="/produtos/:id" element={<Home />} />
	</Routes>
</BrowserRoute>

//Para Acessar pelo link, basta subistituir o :id pelo valor
<Link to="/produtos/1">Quem Somos</Link> 
<Link to={`/produtos/{$variavel}`}>Quem Somos</Link>

Question 5

Hook useParams do ‘react-router-dom’

Answer 5

Esse hook retorna todos os dados que foram passados como parametros de url 

url dinamica: produtos/:id 
url clicada: produtos/2

let {id } - useParams() // dentro do componente carregado pelo browser

Question 6

Hook useSearchParams do ‘react-router-dom’

Answer 6

Esse hook retorna todos os dados que foram passados como parametros de url como query String 

url: produtos
url clicada: produtos?nome=lata

let [searchParams] - useSearchParams() // dentro do componente carregado pelo browser

Question 7

Nested Route

Answer 7

produtos/:id 
produtos/:id/detalhes 

<Link to="/produtos/1">Quem Somos</Link> 
<Link to={`/produtos/1/info`}>Informações</Link> 

<BrowserRoute>
	<Routes>
		<Route path="/produtos/:id" element={<Produto />} />
		<Route path="/produtos/:id/info" element={<Info />} />
	</Routes>
</BrowserRoute>

Question 8

Pagina de Not Foud

Answer 8

<BrowserRoute>
	<Routes>
		<Route path="*" element={<PaginaPadraoNotFound />} />
	</Routes>
</BrowserRoute>

Question 9

Link Ativo ( Link da Pagina atual )

Answer 9

Devemos usar o NavLink e usar o comportamento padrão, mas se quiser personalizar o comportamento css do ativo, então devemos usar o isActive em uma arrow
function

<NavLink to="/produtos/1" className={(isActive) =>(isActive?'classe-ativo':'classe-nao-ativa')} >Quem Somos</NavLink>

Question 10

Redirecionamento do usuario dentro de rotas, usando o hook do ‘react-router-dom’

Answer 10

let navigate = useNavigate()
navigate('/pagina')

Question 11

Controlando redirecionamneto do <Route></Route>

Answer 11

<Route path="/PaginaAntiga" element={<Navigate to="/NovaPagina" />} />