Resolvido: adicionando parâmetros ao roteador url react

O principal problema relacionado à adição de parâmetros ao URL React Router é que os parâmetros podem ser facilmente manipulados pelos usuários. Isso pode levar a problemas de segurança, pois usuários mal-intencionados podem usar os parâmetros para obter acesso a recursos ou dados não autorizados. Além disso, se os valores dos parâmetros não forem devidamente validados, isso pode levar a um comportamento inesperado no aplicativo. Finalmente, se muitos parâmetros forem adicionados, isso pode causar problemas de desempenho devido ao aumento da complexidade da URL.

import {
  BrowserRouter as Router,
  Route,
  Link,
  useParams
} from "react-router-dom";

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. import { BrowserRouter as Router, Route, Link, useParams } de “react-router-dom”;
// Isso importa os componentes da biblioteca react-router-dom que serão usados ​​neste código.

2. // Isso cria um componente de roteador que manipulará a navegação entre diferentes rotas.

3. // Isso cria uma rota com um parâmetro dinâmico de 'username'.

4. // Isso renderiza o componente User quando esta rota é correspondida.

5. John // Isso cria um link para a rota /user/john que renderizará o componente User com 'john' como o parâmetro username quando clicado.

6. function User() { //Este é um componente funcional que recebe o nome de usuário como um argumento e o renderiza dentro de tags div quando chamado clicando no link acima dele.

7. deixe { nome de usuário } = useParams(); //Isto usa a desestruturação para obter acesso ao nome de usuário de useParams().

8. retorno (

); //Isso retorna um elemento div contendo qualquer valor passado para o nome de usuário, que neste caso seria 'john'.

O que é o roteador React

O React Router é uma biblioteca de roteamento para aplicativos React. Ele fornece os principais componentes e funções necessários para criar um aplicativo de página única (SPA) com navegação entre diferentes páginas. Ele permite que os desenvolvedores definam rotas, que são caminhos que mapeiam para componentes específicos no aplicativo. O React Router também fornece recursos como redirecionamentos, correspondência de rota dinâmica e parâmetros de consulta.

Parâmetros para URL

Parâmetros para URL no React Router permitem que os desenvolvedores passem dados dinâmicos da URL para os componentes React. Isso é útil para criar rotas dinâmicas que podem ser usadas para exibir diferentes conteúdos com base nos parâmetros passados ​​na URL. Por exemplo, uma rota como “/user/:id” pode ser usada para exibir uma página de perfil de usuário com um parâmetro id passado na URL. Os parâmetros também podem ser usados ​​para filtrar dados ou outras operações que requerem dados dinâmicos da URL.

Como adiciono um parâmetro a um URL no React

Adicionar parâmetros a uma URL no React Router é feito usando o objeto “params”. Este objeto permite passar pares chave-valor que serão adicionados à URL. Para adicionar um parâmetro, basta adicioná-lo ao objeto params da seguinte forma:

const params = { param1: 'valor1', param2: 'valor2' };

Então, ao criar sua rota, você pode passar o objeto params como um argumento assim:

Os parâmetros serão adicionados ao URL ao navegar para esta rota.