Ang React Router DOM ay isang malawakang ginagamit na library sa React ecosystem para sa pagbuo ng mga single-page na application na may mga kakayahan sa pagruruta. Isa sa mga makabuluhang benepisyo ng library na ito ay ang pagbibigay nito ng hanay ng mga feature para sa pagtutugma ng mga URL at pag-activate ng ilang partikular na bahagi.
Ano ang React Router Dom?
Ang React Router DOM ay isang dynamic, client-side routing library sa Gantihin kapaligiran, na nagpapahintulot sa mga developer na lumikha ng matatag at naa-access na mga web application. Ang pangunahing ideya ay i-synchronize ang iyong UI sa kasalukuyang URL, na ginagawang intuitive at madaling gamitin ang iyong application.
Ang library na ito ay lubos na nagpapayaman sa karanasan ng user dahil tinitiyak nito na hindi kailangang i-refresh ng mga user ang kanilang browser habang nagna-navigate sa application. Bukod dito, ang pagpapatupad para dito ay diretso.
Pag-install ng React Router DOM
Upang makuha ang set up na ito, kailangan muna nating i-install ang react-router-dom library. Madali itong magawa sa pamamagitan ng pagpapatakbo ng mga sumusunod na command sa iyong terminal:
npm install react-router-dom
Ini-install ng command na ito ang React Router DOM package sa aming proyekto. Sa matagumpay na pag-install, maaari na naming i-import ang kinakailangang bahagi mula sa 'react-router-dom' sa aming application.
Pagse-set up ng React Router Dom
Ngayon na matagumpay naming na-install ito sa aming proyekto, oras na para ipatupad ito. Tingnan natin ang isang pangunahing pagpapatupad ng react-router-dom:
import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Component1 from './Component1';
import Component2 from './Component2';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Component1} />
<Route path="/component2" component={Component2} />
</Switch>
</Router>
);
}
export default App;
Sa code sa itaas, na-import namin ang mga kinakailangang bahagi mula sa React Router DOM library.
Pag-unawa sa Code
-
Ang `
` component ay gumagamit ng HTML5 history API (pushState, replaceState, at ang popstate na kaganapan) upang panatilihing naka-sync ang UI sa URL. Binigyan namin ito ng alias ng ` ` para sa kaginhawahan. - Sa loob ng Router, naglagay kami ng `
` sangkap. Ang bahaging ito ng React Router ay naghahanap sa mga anak nito ` ` mga bahagi upang i-render ang una kung saan tumutugma ang path prop sa kasalukuyang pathname ng lokasyon. - Ang mga susunod na hakbang ay kinabibilangan ng `
` sangkap. Dito nangyayari ang mahika. Ang bahagi ng Ruta ay ginagamit upang tukuyin ang iba't ibang mga ruta ng aming aplikasyon. Tinukoy namin ang dalawang path, isang default na path ('/') na naglo-load ng Component1, at isa pang path ('/component2') na maglo-load ng Component2 kapag na-access.
Ang konsepto ng pagruruta ay mahalaga sa paglikha ng mga single-page na application sa React. Sa React Router DOM, ito ay nagiging walang hirap at intuitive upang ipatupad.
Karagdagang Mga Tampok
Nag-aalok ang React Router Dom ng maraming higit pang mga tampok maliban sa mga nabanggit sa itaas. Halimbawa, ang Nested Routing, Mga Parameter ng URL, Programmatically navigation, atbp., ay ilan sa mga karagdagang feature na ibinibigay ng library na ito para mapahusay ang karanasan ng developer.
Ang pag-unawa at pag-master ng React Router Dom ay mahalaga para sa sinumang React Developer dahil ito ang nagiging batayan para sa paglikha ng mga dynamic at interactive na web application.
