Riješeno: dodavanje parametara url react ruteru

Glavni problem vezan za dodavanje parametara u URL React Router je taj što korisnici mogu lako manipulirati parametrima. To može dovesti do sigurnosnih problema, jer bi zlonamjerni korisnici potencijalno mogli koristiti parametre da dobiju pristup neovlaštenim resursima ili podacima. Dodatno, ako vrijednosti parametara nisu ispravno provjerene, to bi moglo dovesti do neočekivanog ponašanja u aplikaciji. Konačno, ako se doda previše parametara, to može uzrokovati probleme s performansama zbog povećane složenosti URL-a.

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 } iz “react-router-dom”;
// Ovo uvozi komponente iz biblioteke react-router-dom koje će se koristiti u ovom kodu.

2. // Ovo stvara komponentu rutera koja će upravljati navigacijom između različitih ruta.

3. // Ovo kreira rutu s dinamičkim parametrom 'username'.

4. // Ovo prikazuje korisničku komponentu kada se ova ruta podudara.

5. John // Ovo stvara vezu na /user/john rutu koja će prikazati korisničku komponentu sa 'john' kao parametrom korisničkog imena kada se klikne na nju.

6. function User() { //Ovo je funkcionalna komponenta koja uzima korisničko ime kao argument i prikazuje ga unutar div tagova kada se pozove klikom na vezu iznad nje.

7. let { korisničko ime } = useParams(); //Ovo koristi destrukturiranje da dobije pristup korisničkom imenu iz useParams().

8. povratak (

); //Ovo vraća element div koji sadrži bilo koju vrijednost koja je proslijeđena korisničkom imenu koje bi u ovom slučaju bilo 'john'.

Šta je React ruter

React Router je biblioteka rutiranja za React aplikacije. Pruža osnovne komponente i funkcije potrebne za kreiranje aplikacije na jednoj stranici (SPA) sa navigacijom između različitih stranica. Omogućava programerima da definiraju rute, koje su putanje koje se mapiraju na određene komponente u aplikaciji. React Router također nudi funkcije kao što su preusmjeravanja, dinamičko podudaranje ruta i parametri upita.

Parametri za URL

Parametri za URL u React Routeru omogućavaju programerima da proslijede dinamičke podatke iz URL-a u React komponente. Ovo je korisno za kreiranje dinamičkih ruta koje se mogu koristiti za prikaz različitog sadržaja na osnovu parametara proslijeđenih u URL-u. Na primjer, ruta poput “/user/:id” može se koristiti za prikaz stranice korisničkog profila s parametrom id koji je proslijeđen u URL-u. Parametri se također mogu koristiti za filtriranje podataka ili druge operacije koje zahtijevaju dinamičke podatke iz URL-a.

Kako da dodam parametar u URL u Reactu

Dodavanje parametara URL-u u React Routeru se vrši pomoću objekta “params”. Ovaj objekt vam omogućava da proslijedite parove ključ/vrijednost koji će biti dodati URL-u. Da biste dodali parametar, jednostavno ga dodajte objektu params na sljedeći način:

const params = { param1: 'vrijednost1', param2: 'vrijednost2' };

Zatim, kada kreirate svoju rutu, možete proslijediti objekt params kao argument ovako:

Parametri će se zatim dodati URL-u prilikom navigacije na ovu rutu.