An Warware: Zazzage React dom

Babban matsalar da ke da alaƙa da zazzagewar React Router DOM shine cewa yana iya zama da wahala a daidaitawa da saitawa. React na'ura mai ba da hanya tsakanin hanyoyin sadarwa DOM yana buƙatar tsari mai yawa da saiti, wanda zai iya ɗaukar lokaci da rikitarwa ga masu haɓakawa waɗanda suke sababbi zuwa ɗakin karatu. Bugu da ƙari, React Router DOM yana ci gaba koyaushe, don haka dole ne masu haɓakawa su ci gaba da sabuntawa tare da sabon sigar don tabbatar da dacewa da aikace-aikacen su.

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

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

1. "shigo da { BrowserRouter azaman na'ura mai ba da hanya tsakanin hanyoyin sadarwa, Hanyar } daga 'react-router-dom';" - Wannan layin yana shigo da kayan aikin BrowserRouter da Route daga ɗakin karatu na react-router-dom.

2. "ReactDOM.render("- Wannan layin yana kiran hanyar bayar da ReactDOM don samar da wani abu na React a cikin DOM a cikin kwandon da aka kawo da kuma mayar da tunani ga bangaren (ko ya dawo da banza don abubuwan da ba su da ƙasa).

3. ""- Wannan alama ce ta buɗewa don ɓangaren na'ura mai ba da hanya tsakanin hanyoyin sadarwa wanda za a yi amfani da shi don nannade duk hanyoyin mu don samar da ayyukan sarrafa kayan aikin mu.

4. "”- Wannan alama ce ta buɗewa don ɓangaren hanyoyin hanya wanda za a yi amfani da shi don ayyana hanya ɗaya a cikin aikace-aikacen mu wanda zai dace da duk wani buƙatun da aka yi a '/'.

5. ""- Wannan alama ce ta rufe kai wanda ke haifar da ɓangaren App a cikin bishiyar DOM ɗin mu lokacin da wannan hanyar ta dace da dom na mai ba da hanya tsakanin hanyoyin sadarwa.
Bangaren App na iya zama kowane ɓangaren React ɗin da muka ayyana a wani wuri a cikin codebase ko shigo da shi daga wani ɗakin karatu ko fakiti kamar Material UI ko Bootstrap da sauransu…

6. "" - Wannan alama ce ta rufe Rute Component wanda aka buɗe akan layi na 4 a sama, yana rufe wannan ƙayyadaddun ma'anar hanya ta yadda za a iya ƙara wasu hanyoyin idan an buƙata daga baya a cikin codebase ɗinmu ba tare da rinjayar wannan aikin ko halinsa ba. .

7. “” – Wannan alama ce ta rufe Rukunin Rukunin da aka buɗe akan layi na 3 a sama, yana rufe wannan takamaiman ma’anar na’ura mai ba da hanya tsakanin hanyoyin sadarwa ta yadda za a iya ƙara sauran hanyoyin sadarwa idan an buƙata daga baya a cikin codebase ɗinmu ba tare da shafar aikin wannan mutum ko halayensa ba. ..

8.document.getElementById('tushen'));" - A ƙarshe, mun wuce a cikin takaddun getElementById ('tushen') azaman hujja don hanyar ReactDOM wanda ke gaya masa inda daidai muke son hawa / fitar da app a cikin itacen DOM (a cikin wannan yanayin a cikin wani abu tare da id = " tushen").

react-router-dom kunshin

React Router sanannen ɗakin karatu ne na kewayawa don React. Yana ba da API mai ƙarfi, mai sauƙin amfani don sarrafa hanyoyin aikace-aikace da kewayawa. Kunshin react-router-dom shine sigar hukuma ta React Router don aikace-aikacen yanar gizo. Yana bayar da abubuwa kamar da kuma don taimakawa gudanar da zirga-zirga a cikin app ɗin ku. Hakanan ya haɗa da ƙugiya kamar tarihin amfani, amfani da Location, da kuma amfani da Params don samun damar bayanan hanyar yanzu daga cikin abubuwan haɗin ku. Tare da react-router-dom zaka iya ƙirƙirar hanyoyi masu ƙarfi cikin sauƙi dangane da sigogin URL, igiyoyin tambaya, ko ma dabaru na al'ada. Hakanan zaka iya ƙirƙirar hanyoyin gida tare da sassa masu ƙarfi don samar da ƙarin iko akan tsarin kewayawa na aikace-aikacenku.

Yadda ake zazzage na'ura mai ba da hanya tsakanin hanyoyin sadarwa dom Code Misali

1. Sanya React Router Dom:
A cikin kundin tsarin aikin ku, gudanar da umarni mai zuwa don shigar da React Router Dom:
'npm shigar react-router-dom'

2. Shigo React Router Dom:
Da zarar kun shigar da React Router Dom, zaku iya shigo da shi cikin aikin ku tare da lambar mai zuwa:
'shigo da { BrowserRouter azaman Router, Route} daga 'react-router-dom''

3. Ƙirƙiri Bangaren Hanya:
Na gaba, ƙirƙiri ɓangaren hanya wanda zai ba da shafin lokacin da mai amfani ya ziyarci ƙayyadadden hanyar. Misali, idan kuna son yin shafi lokacin da wani ya ziyarci / gida a cikin aikace-aikacen ku, zaku iya amfani da lambar mai zuwa:
``

4. Kunna App ɗinku tare da Na'ura mai ba da hanya tsakanin hanyoyin sadarwa:
A ƙarshe, kunsa app ɗinku tare da bangaren na'ura mai ba da hanya tsakanin hanyoyin sadarwa domin duk hanyoyinku za su kasance daidai. Kuna iya yin haka ta amfani da lambar da ke gaba a cikin tushen fayil ɗinku (yawanci index.js): ` `.