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>}