Galvenā problēma, kas saistīta ar React Router URL parametriem, ir tā, ka tos var būt grūti izmantot dinamiskos maršrutos. Tas ir tāpēc, ka URL parametri ir statiski un tos nevar mainīt pēc maršruta izveides. Tas nozīmē, ka, ja lietotājam ir jāpiekļūst citai lapai ar dažādiem parametriem, viņam būs jāizveido jauns maršruts katrai parametru kombinācijai. Turklāt, izmantojot URL parametrus, var būt grūti izsekot visām iespējamām kombinācijām un pārliecināties, vai maršrutētājs katru no tām apstrādā pareizi.
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.
);
};
Šis kods iestata React maršrutētāju, lai atveidotu lapu ar lietotājvārdu no URL.
1. Pirmajā rindā tiek importēti komponenti no React Router DOM bibliotēkas.
2. Funkcija App atgriež komponentu Router ar komponentu Route tā iekšpusē, kas norāda, ka jebkuram URL, kas sākas ar “/user/”, ir jāatveido UserPage komponents.
3. Funkcija UserPage izmanto useParams(), lai iegūtu lietotājvārdu no URL, un pēc tam atveido sveicienu, izmantojot šo lietotājvārdu.
URL parametri
URL parametri programmā React Router ir datu daļas, kas tiek nodotas maršrutam kā daļa no URL. Tie ļauj izstrādātājiem nosūtīt maršrutam dinamisku informāciju, piemēram, ID vai vaicājuma virkni. To var izmantot, lai izveidotu dinamiskus maršrutus, ko var izmantot, piemēram, konkrētu datu bāzes vienumu parādīšanai vai satura filtrēšanai, pamatojoties uz lietotāja ievadi. React Router nodrošina rīkus, lai piekļūtu URL parametriem un manipulētu ar tiem, padarot tos ērti lietojamus savā lietojumprogrammā.
Kā pakalpojumā React iegūt URL parametrus no maršruta
Programmā React Router varat piekļūt maršruta URL parametriem, izmantojot āķi useParams. Šis āķis atgriež objektu, kurā ir URL parametru atslēgu un vērtību pāri. Piemēram, ja jūsu maršruts ir /lietotājs/:id, varat piekļūt parametram id ar useParams().id.
