An warware: shigar da na'ura mai ba da hanya tsakanin hanyoyin sadarwa dom

Tabbas! Anan ga hanyar shigar da 'react-router-dom' a cikin app.

React Router DOM an san shi da kasancewa kayan aiki mai ƙarfi da ƙayyadaddun kayan aiki don aikace-aikacen da aka yi tare da `React.js`. Babban manufarsa ita ce aiki tare da mahaɗin mai amfani tare da kowane canje-canje a cikin URL ɗin mai lilo. Lokacin canzawa zuwa ra'ayoyi daban-daban, zaku iya zaɓar don guje wa sake loda dukkan shafin, wanda ke ba aikace-aikacen gidan yanar gizon ku ƙarin ruwa da saurin mai amfani.

//Install React Router DOM
npm install react-router-dom

Magani tare da React Router DOM

Don bincika amfanin wannan ɗakin karatu, bari mu yi la'akari da aikace-aikacen zance tare da saukowa, game da shafukan tuntuɓar. Muna nufin kewaya cikin waɗannan shafuka ba tare da buƙatar sabunta shafin yanar gizon duk lokacin da aka danna maɓallin kewayawa ba.

Don cim ma wannan, mun aiwatar da 'react-router-dom' a cikin aikace-aikacen mu na React. Wannan ya ƙunshi matakai na gaba ɗaya:

1. Shigar da ɗakin karatu ta amfani da npm.
2. Shigo abubuwan da suka dace daga ɗakin karatu cikin aikace-aikacenku.
3. Aiwatar da na'ura mai ba da hanya tsakanin hanyoyin sadarwa.

Saita mataki-mataki da aiwatarwa

Bari mu karya kowane mataki ƙasa don ku sami ƙarin haske game da yadda ake haɗa 'react-router-dom' cikin ayyukanku.

Da farko, gudanar da umarni mai zuwa a cikin na'ura wasan bidiyo don ƙara 'react-router-dom' a cikin abubuwan dogaronku:

npm install react-router-dom

Na gaba, kuna buƙatar shigo da BrowserRouter, road, Da kuma link abubuwan da aka gyara daga 'react-router-dom' zuwa babban bangaren aikace-aikacenku (yawanci 'App.js').

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

Bayan haka, kunsa babban bangaren tare da bangaren 'Router'. Duk wani abu a cikin 'Router' zai sami damar zuwa React Router kuma zai iya amfani da hanyar sadarwa.

<Router>
  //The rest of the application comes here
</Router>

Daga baya, zaku iya saita hanyoyi don ra'ayoyinku daban-daban ta amfani da bangaren 'Hanyar hanya'. Ace kana da 'HomePage', 'AboutPage', da 'ContactPage', hanyar za ta kasance kamar haka:

<Route path="/" exact component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route path="/contact" component={ContactPage} />

Kuma a ƙarshe, kuna iya amfani da abubuwan haɗin 'Link' a cikin mashigin kewayawa inda kuke son sanya hanyoyin kewayawa:

<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>

Waɗannan su ne mahimman matakan yin amfani da `react-router-dom` don yin tuƙi.

Ƙarin ɗakunan karatu da Ayyuka

'React Router DOM' cikakke ne, amma kuna iya buƙatar ƙarin ayyuka don ƙara sigogi masu ƙarfi zuwa URL, sarrafa shafuka 404, hanyoyin gida, ko ma canza hanyoyin da tsari. Bincika fasaloli kamar su `Switch`, `Redirect`, `useParams`, da `useHistory` don samun duk wani tsari mai ma'ana kan tukwici a aikace-aikacen ku.

A ƙarshe, `react-router-dom' shine mafita mai ƙarfi don aikace-aikacen shafi ɗaya da aka yi a cikin `React.js`. Aiwatar da shi yana da sauƙi kuma abubuwan amfaninsa na iya zama masu fa'ida sosai ga aikin gidan yanar gizon da ƙwarewar mai amfani.