Atrisināts: parametru pievienošana url reakcijas maršrutētājam

Pēdējā atjaunošana: 09/11/2023
Autors: JavaScript SourceTrail

Galvenā problēma, kas saistīta ar parametru pievienošanu URL React Router, ir tā, ka lietotāji var viegli manipulēt ar parametriem. Tas var radīt drošības problēmas, jo ļaunprātīgi lietotāji var izmantot šos parametrus, lai piekļūtu nesankcionētiem resursiem vai datiem. Turklāt, ja parametru vērtības nav pareizi pārbaudītas, tas var izraisīt neparedzētu lietojumprogrammas darbību. Visbeidzot, ja tiek pievienots pārāk daudz parametru, tas var izraisīt veiktspējas problēmas URL sarežģītības dēļ.

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ēt { BrowserRouter as Router, Route, Link, useParams } no “react-router-dom”;
// Tas importē komponentus no react-router-dom bibliotēkas, kas tiks izmantoti šajā kodā.

2. // Tādējādi tiek izveidots maršrutētāja komponents, kas veiks navigāciju starp dažādiem maršrutiem.

3. // Tādējādi tiek izveidots maršruts ar dinamisku parametru 'lietotājvārds'.

4. // Tas atveido lietotāja komponentu, kad šis maršruts ir saskaņots.

5. Jānis // Tas izveido saiti uz /lietotājs/džons maršrutu, kas atveidos Lietotāja komponentu ar lietotājvārda parametru 'john', noklikšķinot uz tā.

6. function User() { //Šis ir funkcionāls komponents, kas izmanto lietotājvārdu kā argumentu un atveido to div tagos, kad tas tiek izsaukts, noklikšķinot uz saites virs tā .

7. let { username } = useParams(); //Tas izmanto destrukturizāciju, lai piekļūtu lietotājvārdam no useParams().

8. atgriešanās (

{lietotājvārds}

); //Tas atgriež div elementu, kas satur jebkuru vērtību, kas tika nodota lietotājvārdā, kas šajā gadījumā būtu "džons".

Kas ir React maršrutētājs

React Router ir maršrutēšanas bibliotēka React lietojumprogrammām. Tas nodrošina galvenos komponentus un funkcijas, kas nepieciešamas, lai izveidotu vienas lapas lietojumprogrammu (SPA) ar navigāciju starp dažādām lapām. Tas ļauj izstrādātājiem definēt maršrutus, kas ir ceļi, kas tiek kartēti uz konkrētiem lietojumprogrammas komponentiem. React Router nodrošina arī tādas funkcijas kā novirzīšana, dinamiska maršruta saskaņošana un vaicājuma parametri.

URL parametri

React Router URL parametri ļauj izstrādātājiem nodot dinamiskos datus no URL uz React komponentiem. Tas ir noderīgi, lai izveidotu dinamiskus maršrutus, kurus var izmantot dažāda satura attēlošanai, pamatojoties uz URL nodotajiem parametriem. Piemēram, tādu maršrutu kā “/user/:id” var izmantot, lai parādītu lietotāja profila lapu ar id parametru, kas nodots vietrādī URL. Parametrus var izmantot arī datu filtrēšanai vai citām darbībām, kurām nepieciešami dinamiski dati no URL.

Kā pievienot parametru vietrādim URL programmā React

Parametru pievienošana vietrādim URL programmā React Router tiek veikta, izmantojot objektu “params”. Šis objekts ļauj nodot atslēgu un vērtību pārus, kas tiks pievienoti vietrādim URL. Lai pievienotu parametru, vienkārši pievienojiet to parametru objektam, piemēram:

const params = { param1: 'vērtība1', param2: 'vērtība2'};

Pēc tam, veidojot maršrutu, varat ievadīt parametru objektu kā argumentu, piemēram:

Parametri tiks pievienoti vietrādim URL, navigējot uz šo maršrutu.

Related posts: