Datrys: adweithio llwybrydd dom IndexRedirect

Y brif broblem sy'n gysylltiedig â React Router DOM IndexRedirect yw y gall achosi ailgyfeiriadau annisgwyl. Mae hyn oherwydd bod y gydran IndexRedirect yn ailgyfeirio defnyddwyr yn awtomatig i lwybr penodol pan fyddant yn cyrchu URL gwraidd gwefan. Gall hyn fod yn ddryslyd i ddefnyddwyr sy'n disgwyl gweld yr hafan neu gynnwys arall yn yr URL gwraidd. Yn ogystal, os yw defnyddiwr eisoes wedi llywio i dudalen benodol ac yna'n adnewyddu ei borwr, efallai y bydd yn cael ei ailgyfeirio i ffwrdd yn annisgwyl o'r dudalen honno oherwydd cydran IndexRedirect.

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

<Router>
  <Route path="/">
    <IndexRedirect to="/home" />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Route>  
</Router>

1. “mewnforio { BrowserRouter fel Llwybrydd, Llwybr, Mynegai Redirect } o 'react-router-dom';” – Mae'r llinell hon yn mewnforio'r cydrannau BrowserRouter, Route a IndexRedirect o'r llyfrgell react-router-dom.

2. "” – Mae’r llinell hon yn lapio’r holl lwybrau mewn cydran Llwybrydd a ddefnyddir i sefydlu llwybro ar gyfer cymhwysiad React.

3. "” – Mae'r llinell hon yn sefydlu llwybr gyda llwybr o '/'. Bydd unrhyw geisiadau i'r llwybr hwn yn cael eu trin gan y llwybr hwn.

4. "” – Mae'r llinell hon yn ailgyfeirio unrhyw geisiadau i'r llwybr '/' i '/cartref'.

5. "” – Mae'r llinell hon yn sefydlu llwybr gyda llwybr o '/cartref'. Bydd unrhyw geisiadau i'r llwybr hwn yn cael eu trin gan y gydran Cartref a drosglwyddir i mewn fel dadl i'r elfen Llwybr.

6. "” – Mae'r llinell hon yn sefydlu llwybr gyda llwybr o '/about'. Bydd unrhyw geisiadau i'r llwybr hwn yn cael eu trin gan y gydran About a gaiff ei throsglwyddo fel dadl i'r gydran Llwybr.

7.”” & “” - Mae'r llinellau hyn yn cau'r ddau lwybr a chydrannau llwybrydd yn y drefn honno

Beth yw IndexRedirect

Mae IndexRedirect yn elfen yn React Router sy'n eich galluogi i ailgyfeirio o un llwybr i'r llall. Fe'i defnyddir pan fyddwch am ailgyfeirio'r defnyddiwr o URL gwraidd eich cais i lwybr arall. Er enghraifft, os oes gennych chi raglen gyda URL gwraidd o “/”, gallwch ddefnyddio IndexRedirect i ailgyfeirio'r defnyddiwr i “/home” pan fydd yn ymweld â'r URL gwraidd.

Sut i wneud IndexRedirect

Mae IndexRedirect yn React Router yn ffordd i ailgyfeirio defnyddwyr o URL gwraidd eich cais i URL arall. Gall hyn fod yn ddefnyddiol ar gyfer cyfeirio defnyddwyr at dudalen bwysicaf eich cais, neu ar gyfer creu tudalen lanio.

I wneud IndexRedirect yn React Router, mae angen i chi ddefnyddio'r cydran. Mae'r gydran hon yn cymryd dau brop: "i" a "gwthio". Defnyddir y prop “to” i nodi'r URL yr ydych am i ddefnyddwyr gael eu hailgyfeirio iddo, tra bod y prop “gwthio” yn penderfynu a ddylid diweddaru hanes y porwr pan fydd yr ailgyfeiriad hwn yn digwydd (gwir yn ddiofyn).

Er enghraifft, os oeddech am i ddefnyddwyr sy'n ymweld â'ch URL gwraidd (ee, www.example.com) gael eu hailgyfeirio i www.example.com/home, gallech ddefnyddio IndexRedirect fel hyn:

… llwybrau eraill …