Rozwiązany: dodanie parametrów do routera reagującego na adres URL

Głównym problemem związanym z dodawaniem parametrów do URL React Router jest to, że użytkownicy mogą łatwo manipulować parametrami. Może to prowadzić do problemów z bezpieczeństwem, ponieważ szkodliwi użytkownicy mogą potencjalnie wykorzystać parametry w celu uzyskania dostępu do nieautoryzowanych zasobów lub danych. Ponadto, jeśli wartości parametrów nie zostaną poprawnie zweryfikowane, może to prowadzić do nieoczekiwanego zachowania aplikacji. Wreszcie, jeśli zostanie dodanych zbyt wiele parametrów, może to spowodować problemy z wydajnością ze względu na zwiększoną złożoność adresu 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. zaimportuj {BrowserRouter as Router, Route, Link, useParams} z „react-router-dom”;
// Spowoduje to zaimportowanie komponentów z biblioteki react-router-dom, które zostaną użyte w tym kodzie.

2. // Spowoduje to utworzenie komponentu routera, który będzie obsługiwał nawigację między różnymi trasami.

3. // Spowoduje to utworzenie trasy z dynamicznym parametrem „nazwa użytkownika”.

4. // Spowoduje to wyrenderowanie komponentu User, gdy ta trasa zostanie dopasowana.

5. John // Spowoduje to utworzenie łącza do trasy /user/jan, które po kliknięciu wyrenderuje komponent użytkownika z parametrem „jan” jako nazwa użytkownika.

6. function User() { //To jest funkcjonalny komponent, który przyjmuje nazwę użytkownika jako argument i renderuje ją wewnątrz tagów div po wywołaniu przez kliknięcie linku powyżej.

7. niech { nazwa użytkownika } = useParams(); //To wykorzystuje destrukturyzację, aby uzyskać dostęp do nazwy użytkownika z useParams().

8. powrót (

); //To zwraca element div zawierający dowolną wartość przekazaną do nazwy użytkownika, która w tym przypadku byłaby „jan”.

Co to jest router React

React Router to biblioteka routingu dla aplikacji React. Zapewnia podstawowe komponenty i funkcje niezbędne do stworzenia aplikacji jednostronicowej (SPA) z nawigacją między różnymi stronami. Pozwala programistom definiować trasy, które są ścieżkami odwzorowującymi określone komponenty w aplikacji. React Router zapewnia również takie funkcje, jak przekierowania, dynamiczne dopasowywanie tras i parametry zapytań.

Parametry do adresu URL

Parametry adresu URL w React Router umożliwiają programistom przekazywanie dynamicznych danych z adresu URL do komponentów React. Jest to przydatne do tworzenia tras dynamicznych, których można używać do wyświetlania różnych treści na podstawie parametrów przekazywanych w adresie URL. Na przykład trasy typu „/user/:id” można użyć do wyświetlenia strony profilu użytkownika z parametrem id przekazanym w adresie URL. Parametry mogą być również używane do filtrowania danych lub innych operacji wymagających dynamicznych danych z adresu URL.

Jak dodać parametr do adresu URL w React

Dodawanie parametrów do adresu URL w React Router odbywa się za pomocą obiektu „params”. Ten obiekt umożliwia przekazywanie par klucz-wartość, które zostaną dodane do adresu URL. Aby dodać parametr, po prostu dodaj go do obiektu params w następujący sposób:

const params = {param1: 'wartość1', param2: 'wartość2'};

Następnie podczas tworzenia trasy możesz przekazać obiekt params jako argument w następujący sposób:

Parametry zostaną następnie dodane do adresu URL podczas nawigacji do tej trasy.