Como pegar a rota atual com React Router

Neste artigo você aprenderá a como pegar a rota atual com React Router, uma ação importante em aplicações de React JS!

Fala programador(a), beleza? Bora aprender mais sobre React JS!

React Router é uma biblioteca para gerenciamento de rotas em aplicações React. Ele permite que você defina múltiplas rotas e renderize diferentes componentes com base na rota atual do navegador.

Em alguns casos, pode ser útil obter o caminho da rota atual dentro de um componente. Este artigo mostrará como você pode fazer isso usando a API fornecida pelo React Router.

O Hook useLocation

A partir da versão 5.1, o React Router introduziu vários hooks úteis que simplificam muito a obtenção de informações sobre a rota atual. Um desses hooks é o useLocation.

O hook useLocation retorna um objeto que contém informações sobre a rota atual. Esse objeto inclui a rota atual no campo pathname.

Vejamos um exemplo:

import React from 'react';
import { useLocation } from 'react-router-dom';

const MeuComponente = () => {
    const local = useLocation();

    return (
        <div>
            <p>A rota atual é: {local.pathname}</p>
        </div>
    );
}

export default MeuComponente;

Neste exemplo, importamos useLocation de react-router-dom e o invocamos em nosso componente.

O objeto local resultante contém a rota atual em local.pathname. Isso é então renderizado em nosso componente.

Utilizando em um Componente Maior

Em um componente maior, ou uma página completa, você pode querer usar a rota atual para determinar o comportamento ou renderização do componente.

Aqui está um exemplo onde usamos a rota atual para exibir diferentes conteúdos:

import React from 'react';
import { useLocation } from 'react-router-dom';

const MinhaPagina = () => {
    const local = useLocation();

    let conteudo;

    switch (local.pathname) {
        case '/inicio':
            conteudo = <h1>Página Inicial</h1>;
            break;
        case '/sobre':
            conteudo = <h1>Sobre Nós</h1>;
            break;
        default:
            conteudo = <h1>Página Não Encontrada</h1>;
    }

    return (
        <div>
            {conteudo}
        </div>
    );
}

export default MinhaPagina;

Neste exemplo, dependendo da rota atual, renderizamos um título diferente. Isso é apenas um exemplo básico, mas as possibilidades são quase infinitas.

Considerações Finais

É importante lembrar que useLocation retornará um novo objeto a cada renderização, mesmo que a localização não tenha mudado.

Isso significa que o uso de useLocation causará uma nova renderização de qualquer componente que o use.

Em muitos casos, isso não será um problema, mas se você estiver tendo problemas de desempenho, pode precisar otimizar seu componente para evitar renderizações desnecessárias.

Além disso, useLocation só funciona em componentes que estão dentro de um componente Router do React Router.

Isso ocorre porque useLocation usa o contexto fornecido pelo Router para obter informações sobre a rota atual.

Se você tentar usar useLocation fora de um componente Router, receberá um erro.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo que explica sobre como pegar a rota atual com React Router!

O React Router oferece ferramentas poderosas para gerenciamento de rotas em aplicações React.

O hook useLocation é uma dessas ferramentas, permitindo que você acesse facilmente a rota atual em seus componentes.

Se você está construindo uma aplicação React com várias rotas, certamente encontrará muitos usos para esse hook útil.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.