Oi, Matheus, tudo bem?
Bom, há duas formas de passar informações pela URL do navegador, uma delas é a que você já conhece, que é utilizando o seletor :nomeDoParametro
no Route
do React Router. Os parâmetros passados dessa forma se chamam route params, ou parâmetros de rota. Para passar mais de um, você pode escrever algo asssim:
<Route path="posts/:id/:secao" element={<Post />} />
// No componente Post:
const parametros = useParams();
console.log(parametros.id, parametros.secao)
E, na hora de escrever a URL no navegador, você pode passar algo como http://localhost:3000/posts/5/3
. Assim, o parâmetro id
terá o valor 5 e o parâmetro secao
terá o valor 3.
A outra forma de passar informações pela URL é utilizando query params, ou parâmetros de busca, que se assemelha à forma que você escreveu. Na hora de escrever a URL no navegador, poderá ser passado algo como http://localhost:3000/posts?id=5&secao=3
, mas o caminho do Route
no React Router
fica apenas posts
:
<Route path="posts" element={<Post />} />
E, no componente Post
, você irá utilizar um hook do React Router chamado useSearchParams
, da seguinte forma:
const [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get('id'), searchParams.get('secao'));
A constante searchParams
acima funciona da mesma forma que um objeto do tipo URLSearchParams, que é nativo do JavaScript (note que é necessário utilizar métodos como o get()
para obter um parâmetro, por exemplo). Você pode ler mais sobre o useSearchParams
na documentação do React Router.
Os parâmetros de busca são mais comuns para realizar buscas e filtros de resultados, por exemplo. Para renderizar conteúdos como posts diferentes, costuma-se utilizar mais os parâmetros de rota.
Espero ter ajudado! Abraços e bons estudos :)