Sut i Ddefnyddio Router yn React

Helo Tecnobits! 🚀 Sut ydych chi'n syrffio'r we heddiw? Rwy'n gobeithio eich bod yn barod i ddysgu Sut i Ddefnyddio Router yn React mewn ffordd hwyliog dros ben. Gadewch i ni wneud i'ch prosiectau ddisgleirio fel erioed o'r blaen! 😎✨

– Cam wrth Gam ➡️ Sut i ddefnyddio Llwybrydd yn React

• Gosod Llwybrydd React: Y peth cyntaf y mae angen i chi ei wneud yw gosod React Router yn eich cais. Gallwch chi ei wneud trwy npm gyda'r gorchymyn npm gosod react-router-dom.
• Mewnforio Llwybrydd: Unwaith y byddwch wedi gosod React Router, mae angen i chi ei fewnforio i'ch ffeil cais. Gallwch chi ei wneud gyda llinell y cod mewnforio { BrowserRouter fel Llwybrydd, Switch, Route } o 'react-router-dom'.
• Ffurfweddu llwybrau: Nawr mae'n bryd ffurfweddu llwybrau eich cais. Defnyddiwch y gydran i lapio'r llwybrau rydych chi am eu diffinio. Yna defnyddiwch y gydran mewn i nodi'r llwybrau a'r cydrannau cysylltiedig.
• Mordwyo rhwng llwybrau: Er mwyn galluogi llywio rhwng llwybrau yn eich cais, gallwch ddefnyddio'r gydran i greu cysylltiadau i'r gwahanol lwybrau. Gallwch hefyd ddefnyddio i arddullio'r dolenni hyn yn ddeinamig.
• Mynediad i baramedrau llwybr: Weithiau mae angen cyrchu paramedrau llwybr. Gallwch chi ei wneud gan ddefnyddio props.match.params y tu mewn i'ch cydrannau i gael y paramedrau URL.
• Ailgyfeirio: Os oes angen i chi ailgyfeirio defnyddwyr i wahanol lwybrau, gallwch ddefnyddio'r gydran ar ei gyfer. Yn syml, nodwch y llwybr rydych chi am ailgyfeirio'r defnyddiwr iddo.

+ Gwybodaeth ➡️

Beth yw Llwybrydd yn React?

1. Offeryn yw Llwybrydd yn React sy'n caniatáu llywio rhwng gwahanol gydrannau cymhwysiad gwe heb orfod ail-lwytho'r dudalen.
2. Mae'r Router in React yn hanfodol ar gyfer adeiladu cymwysiadau gwe un dudalen (SPA) ac mae'n sicrhau profiad defnyddiwr hylif a deinamig.
3. Mae'r llwybrydd yn gyfrifol am reoli'r URLs a rendro'r cydrannau cyfatebol yn seiliedig ar y llwybr y mae'r defnyddiwr yn ymweld ag ef yn y rhaglen.

Sut i osod a ffurfweddu Llwybrydd yn React?

1. I osod Llwybrydd yn React, yn gyntaf rhaid i chi sicrhau bod Node.js ac npm wedi'u gosod ar eich cyfrifiadur.
2. Yna, gallwch agor y derfynell a llywio i'ch ffolder prosiect React.
3. Unwaith y tu mewn i'r ffolder prosiect, rhedeg y gorchymyn npm gosod react-router-dom i osod y Llwybrydd yn eich prosiect.
4. Ar ôl gosod y Llwybrydd, ym mhrif ffeil eich app (App.js fel arfer), mewnforiwch y cydrannau angenrheidiol o react-router-dom i ddechrau ffurfweddu llwybrau a llywio eich app.

Sut i ddiffinio llwybrau gyda'r Llwybrydd yn React?

1. I ddiffinio llwybrau gyda'r Llwybrydd yn React, mewnforiwch y cydrannau yn gyntaf Llwybrydd Porwr y Llwybr o react-router-dom ym mhrif ffeil eich cais.
2. Yna defnyddiwch y gydran Llwybrydd Porwr i gynnwys pob llwybr yn eich cais. Mae'r gydran hon yn sicrhau bod llywio yn gweithio'n gywir.
3. Ar ôl lapio'r llwybrau gyda Llwybrydd Porwr, gallwch ddefnyddio'r gydran Llwybr i ddiffinio'r llwybrau a'r cydrannau a fydd yn cael eu rendro pan fydd y defnyddiwr yn ymweld ag URL penodol.
4. Er enghraifft, gallwch greu llwybr ar gyfer tudalen gartref eich app fel a ganlyn:

Sut i lywio rhwng llwybrau gan ddefnyddio Router yn React?

1. I lywio rhwng llwybrau gan ddefnyddio'r Llwybrydd yn React, gallwch ddefnyddio'r gydran Cyswllt o react-router-dom.
2. Y gydran Cyswllt yn caniatáu i chi greu cysylltiadau rhwng gwahanol lwybrau yn eich cais, gan ei gwneud yn haws i'r defnyddiwr lywio.
3. Yn syml, lapiwch y testun neu'r elfen rydych chi am ei throsi'n ddolen â'r gydran Cyswllt a nodwch y llwybr rydych chi am gyfeirio'r defnyddiwr at ddefnyddio'r priodoledd i.
4. Er enghraifft, gallwch greu dolen i dudalen gartref eich app fel a ganlyn: Hafan

Sut i ddefnyddio paramedrau llwybr yn Router yn React?

1. I ddefnyddio paramedrau llwybr yn y Llwybrydd yn React, gallwch ddiffinio llwybr gyda segment URL deinamig gan ddefnyddio'r nod «:".
2. Er enghraifft, os ydych chi am greu llwybr sy'n cymryd paramedr ID, gallwch chi ei wneud fel hyn:
3. Ar ôl diffinio'r llwybr gyda'r paramedr llwybr, gallwch gael mynediad at y gwerth paramedr yn y gydran gyfatebol gan ddefnyddio'r eiddo mats.params.
4. Er enghraifft, yn y gydran Defnyddiwr, gallwch gyrchu gwerth y paramedr ID fel a ganlyn: const userId = this.props.match.params.id;

Sut i drin llwybrau nythu gyda Router yn React?

1. I drin llwybrau nythu gyda'r Llwybrydd yn React, gallwch ddefnyddio'r gydran Newid o react-router-dom i rendr dim ond y llwybr cyntaf sy'n cyfateb i'r URL cyfredol.
2. Y gydran Newid yn eich galluogi i nythu llwybrau fel mai dim ond y gydran gyntaf sy'n cyfateb i'r URL sy'n cael ei rendro, gan atal llwybrau anghywir rhag cael eu rendro.
3. Er enghraifft, gallwch ddiffinio llwybrau nythu ar gyfer cydran fel a ganlyn:

Sut i ailgyfeirio defnyddwyr i lwybrau penodol gyda Router in React?

1. I ailgyfeirio defnyddwyr i lwybrau penodol gyda'r Llwybrydd yn React, gallwch ddefnyddio'r gydran Ailgyfeirio o react-router-dom.
2. Y gydran Ailgyfeirio yn eich galluogi i ailgyfeirio'r defnyddiwr i lwybr penodol pan fodlonir amod penodol, megis pan nad yw'r defnyddiwr wedi'i ddilysu.
3. Yn syml, gosodwch y gydran Ailgyfeirio yn lleoliad dymunol eich app a nodwch y llwybr rydych chi am ailgyfeirio'r defnyddiwr i ddefnyddio'r priodoledd i.
4. Er enghraifft, gallwch ailgyfeirio'r defnyddiwr i'r dudalen gartref os nad yw wedi'i ddilysu fel a ganlyn:

Sut i reoli gwallau 404 gyda'r Llwybrydd yn React?

1. I drin 404 o wallau gyda'r Llwybrydd yn React, gallwch ddefnyddio'r gydran Llwybr i greu llwybr sy'n cael ei rendro pan nad oes yr un o'r llwybrau presennol yn cyfateb i'r URL cyfredol.
2. Yn syml, crëwch lwybr heb baramedr llwybr penodol a'i osod ar ddiwedd eich llwybrau presennol fel ei fod yn cael ei rendro dim ond pan nad oes unrhyw lwybrau eraill yn cyfateb.
3. Gallwch ddefnyddio'r gydran hon i arddangos tudalen gwall wedi'i haddasu neu yn syml neges “Tudalen heb ei darganfod” i'r defnyddiwr.
4. Er enghraifft, gallwch greu llwybr i drin y gwall 404 fel a ganlyn:

Sut i ddiogelu llwybrau yn React gan ddefnyddio Llwybrydd?

1. I sicrhau llwybrau yn React gan ddefnyddio Llwybrydd, gallwch greu cydran lefel uchel (HOC) sy'n gwirio a yw'r defnyddiwr wedi'i ddilysu cyn caniatáu iddynt gyrchu llwybr gwarchodedig.
2. Gall y gydran hon wirio a oes gan y defnyddiwr sesiwn ddilys a'u hailgyfeirio i'r hafan os nad ydynt wedi'u dilysu.
3. Yna gallwch chi ddefnyddio'r gydran lefel uchel hon i lapio'r llwybrau rydych chi am eu diogelu, gan sicrhau mai dim ond defnyddwyr dilys sydd â mynediad iddynt.
4. Er enghraifft, gallwch greu cydran lefel uchel i ddiogelu llwybrau fel a ganlyn: const PrivateRoute = ({ cydran: Cydran, …rest }) => ( (wedi'i Ddilysu ? : )} />);

Tan y tro nesaf, Tecnobits! Peidiwch ag anghofio dysgu i defnyddio Router yn React i fynd â'ch prosiectau i'r lefel nesaf. Welwn ni chi cyn bo hir!