O principal problema relacionado aos parâmetros de URL do React Router é que eles podem ser difíceis de usar em rotas dinâmicas. Isso ocorre porque os parâmetros de URL são estáticos e não podem ser alterados após a criação da rota. Isso significa que se um usuário precisar acessar uma página diferente com parâmetros diferentes, ele precisará criar uma nova rota para cada combinação de parâmetros. Além disso, ao usar parâmetros de URL, pode ser difícil acompanhar todas as combinações possíveis e garantir que cada uma seja tratada adequadamente pelo roteador.
import {
BrowserRouter as Router,
Route,
Link,
useParams
} from "react-router-dom";
const App = () => {
return (
<Router>
<div>
<Route path="/user/:username" component={UserPage} />
</div>
</Router>
);
};
const UserPage = () => {
let { username } = useParams(); // Get the username from the URL.
return (
<div>Hello, {username}!</div> // Render a greeting with the username.
);
};
Este código está configurando um React Router para renderizar uma página com um nome de usuário da URL.
1. A primeira linha importa componentes da biblioteca React Router DOM.
2. A função App retorna o componente Router com um componente Route dentro dele, que especifica que qualquer URL começando com “/user/” deve renderizar o componente UserPage.
3. A função UserPage usa useParams() para obter o nome de usuário da URL e, em seguida, renderiza uma saudação usando esse nome de usuário.
Parâmetros de URL
Parâmetros de URL no React Router são pedaços de dados que são passados para uma rota como parte do URL. Eles permitem que os desenvolvedores passem informações dinâmicas para uma rota, como um ID ou string de consulta. Isso pode ser usado para criar rotas dinâmicas que podem ser usadas para coisas como exibir itens específicos de um banco de dados ou filtrar conteúdo com base na entrada do usuário. O React Router fornece ferramentas para acessar e manipular parâmetros de URL, facilitando seu uso em seu aplicativo.
Como você obtém os parâmetros de URL de uma rota no React
No React Router, você pode acessar os parâmetros de URL de uma rota usando o hook useParams. Esse gancho retorna um objeto contendo pares chave-valor dos parâmetros de URL. Por exemplo, se sua rota for /user/:id, você pode acessar o parâmetro id com useParams().id.
