Como ler a URL atual em React JS

Neste artigo você aprenderá a como ler a URL atual em React, um importante recurso para lidar com os endereços das páginas

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

Ler a URL atual em uma aplicação React pode ser útil por várias razões, como o roteamento condicional, o rastreamento de atividades do usuário e a personalização da experiência do usuário.

Neste artigo, exploraremos várias formas de obter a URL atual em um projeto React, sempre utilizando componentes funcionais e seguindo as melhores práticas.

Utilizando React Router

Se você estiver usando o React Router na sua aplicação, obter a URL atual é bastante simples.

O React Router fornece hooks úteis como useLocation e useHistory que você pode usar diretamente em seus componentes.

Exemplo com useLocation

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

const MostrarURL = () => {
  const localizacao = useLocation();

  return <p>A URL atual é {localizacao.pathname}</p>;
};

Exemplo com useHistory

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

const MostrarURL = () => {
  const historico = useHistory();

  return <p>A URL atual é {historico.location.pathname}</p>;
};

Utilizando JavaScript Puro

Se você não está utilizando uma biblioteca de roteamento ou precisa de algo mais simples, pode também utilizar o objeto window.location para ler a URL.

Exemplo com window.location

import React from 'react';

const MostrarURL = () => {
  return <p>A URL atual é {window.location.href}</p>;
};

Hooks Personalizados para URLs

Se a leitura da URL é algo que você vai fazer repetidas vezes em diferentes partes da sua aplicação, pode ser útil criar um hook personalizado.

Exemplo de Hook Personalizado

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

const useObterURL = () => {
  const localizacao = useLocation();
  return localizacao.pathname;
};

// Em outro componente
import React from 'react';
import useObterURL from './useObterURL';

const MostrarURL = () => {
  const urlAtual = useObterURL();

  return <p>A URL atual é {urlAtual}</p>;
};

Cuidados e Considerações

Evite useEffect para URLs constantes

Se você não espera que a URL mude enquanto o usuário está na página, evite o uso de useEffect para definir a URL. Isso pode levar a renderizações desnecessárias.

Garantindo a Segurança

Ao trabalhar com URLs, sempre valide e sanitize as informações obtidas para evitar problemas de segurança, como ataques de injeção.

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

Conclusão

Ler a URL atual em React JS é uma tarefa bastante simples, mas que oferece um leque de opções. Dependendo das suas necessidades, você pode escolher entre várias abordagens, desde utilizar os hooks fornecidos pelo React Router até recorrer ao JavaScript puro.

Com essas ferramentas em mãos, você estará bem preparado para tornar sua aplicação React mais dinâmica e responsiva às ações do usuário.

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