React Router Dom

Para navegação entre rotas, utilizamos a biblioteca react-router-dom.

    yarn add react-router-dom
    yarn add -D @types/react-router-dom

Estrutura

Para sua utilização, temos a pasta routes, e temos no arquivo index, a seguinte estrutura:

• BrowserRouter: Componente que envolve toda a aplicação e é responsável por habilitar as rotas.
  • Route (Guard): Um componente de rota que recebe um Guard.
    • Route (Página): Componente de rota que recebe um path (caminho da página) e um componente de página.

Exemplo de rotas:

    export function MainRoutes() {
        // Rotas acessíveis sem um login
        <Route element={<AuthGuard />}>
            <Route path="{caminho da página}" element={Página} />
            <Route path="login" element={<Login />} />
            { ... }
        </Route>
        // Rotas acessíveis somente para admin
        <Route element={<AdminGuard />}>
            <Route path="{caminho da página}" element={Página} />
            <Route path="customers" element={<Customers />} />
            { ... }
        </Route>
        { ... }
    }

Rotas com parâmetros

Para definirmos que uma rota receberá parâmetros, fazemos da seguinte maneira:

    ...
    // Passamos na definição da rota o parâmetro como **:nomeDoParametro**.
    <Route path="rota/:id" />
    ...

Para pegar o valor na página:

Caminho: /rota/3

    //Importamos o hook utilizado
    import { useParams } from "react-router-dom"
    function Rota() {
        ...
        // O hook "useParams" nos retorna todos os parâmetros 
        // definidos na estruturação de rotas.
        // O nome da váriavel será o mesmo que foi definido na estruturação.
        const { id } = useParams();
        ...
    }

Guards

Utilizamos Guards para proteger certas rotas de acessos não autorizados. Guards são componentes passados a um componente Route, e envolvem um conjunto de rotas para definir sua proteção. Os criamos da seguinte forma:

    function AdminGuard() {

        // Hook do projeto SafeWay para verificar permissão do usuário.
        const { isAdmin } = useAuth();
        // Váriavel para pegarmos o caminho atual e atualizarmos caso necessário.
        const location = useLocation();

        return (
            isAdmin()
                ? <Outlet />
                : <Navigate to="/" state={{ from: location }} replace />
        )
    }

O componente Outlet retorna as rotas dentro de outra rota, caso existam. Neste caso, se o usuário for um admin, poderá ver as rotas definidas apenas para Admin. Caso contrário, retornará a página inicial.

Dica

Para ver as verificações implementadas no front-end da SafeWay veja o hook useAuth.

Navegando entre rotas

Para navegarmos entre as rotas, temos o hook useNavigate. Nele, temos um método navigate, que recebe como parâmetro o caminho desejado.

    import { useNavigation } from "react-router-dom";
    function Pagina() {
        ...
        const navigation = useNavigate();
        ...

        // Podemos utilizar o hook dentro de uma função...
        function exit() {
            navigation.navigate("/login");
        }
        ...
        render(
            // ... ou dentro de um evento.
            <button onClick={() => navigation.navigate("deposits")} />
        )
    }

Dica

Caso queira voltar uma página, também podemos passar ao navigate o valor -1