Simplificando a navegação em React com rotas

React Router

Geralmente fazemos as configurações dentro do index.tsx, para ter acesso aos recursos de rotas precisamos encapsular tudo dentro doBrowserRouter

Route

No Route colocamos um atributo path="/", que é o endereço da rota apos o endereço da pagina. E tambem colocamos o element={}.

404

Para criar rota de 404 colocamos path'*' ao final de todas as rotas

Link

Para uma navegação melhor dentro do site utilizamos o componente Link para direcionar as paginas, colocamos a propriedade to:'/'.

Rota Dinamica

Podemos ter uma rota dinamica como camos ':' antes da variavel dinamica, isso é chamado de parametro. Ex: path: '/album/:albumId'.

Podemos capturar esse parametro usando o Hook useParams

const { albumId } = useParams<{ albumId: string }>();

É recomendado uar o ? antes do parameto pois isso ja fara uma verificação.

useNavigate

É um hook usado geralmente quando queremos voltar uma pagina.

const navigate = useNavigate()

const handleBackButton = () =>{
 navigate(-1)
}

<button onClick={handleBackButton}>voltar</button>

Query String ?

Query string é uma parte de uma URL que contém dados que são enviados do cliente.
https://www.example.com/search?q=apple&category=fruits
Para capturar os queryString usamos o hook useSearchParams,
searchParams.get('q')

Rotas privadas

Para criar uma autentificação nas rotas privadas, primeiro criamos um componente que fara esse autentificação, e colocamos o componente que vai ser renderizado como um children, se a validação passar retornamos o children se nao retornamos um null.
element={<Autentificacao><Componente /></Autentificacao>}