Lahendatud: reageerida ruuter lisab varu, et kõik kinni püüda

Peamine probleem, mis on seotud React Routeri ja kõige tabamiseks varuvaru lisamisega, on see, et varumarsruuti võib olla keeruline õigesti konfigureerida. Varumarsruut tuleb konfigureerida nii, et see tabaks kõik päringud, sealhulgas need, mis ei ole kehtivad marsruudid. Kui konfigureerimist ei tehta õigesti, ei püüta kehtetute marsruutide päringuid varumarsruut ja see võib põhjustada vigu või ootamatut käitumist. Lisaks, kui rakendus sisaldab dünaamilisi marsruute (nt kasutaja sisendi põhjal), tuleb neid varumarsruudi konfigureerimisel arvesse võtta, et see ka neid tabaks.

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

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Fallback route */}
      <Route component={NoMatch} /> 

    </Switch>
  </Router>  
);

// 1. rida: see rida impordib komponendid BrowserRouter, Route ja Switch teegist react-router-dom.
// Rida 2: see rida määratleb konstandi nimega App, mis on funktsiooni komponent.
// Rida 3: see rida renderdab ruuteri komponendi react-router-dom.
// Rida 4: see rida renderdab komponendi Switch alates react-router-dom.
// Read 5 ja 6: need read renderdavad kaks marsruudi komponenti täpsete teedega ja komponentidega, mis renderdatakse nende teede sobitamisel.
// Rida 8: see rida renderdab varumarsruudi, kui ükski teine ​​marsruut ei sobi. Kui muud marsruudid ei sobi, renderdab see komponendi NoMatch.

Mis on reageerida ruuter

React Router on Reacti rakenduste marsruutimisteek. See võimaldab arendajatel luua marsruute ja komponente, mida saab kasutada Reacti rakenduse erinevate lehtede vahel navigeerimiseks. See pakub ka selliseid funktsioone nagu dünaamiline marsruudi sobitamine, päringu parameetrid ja asukoha olek. Lisaks toetab see serveripoolset renderdamist ja koodi jagamist.

Kogu varumarsruut

Kõikide varumarsruut on React Routeri marsruut, mis ühtib mis tahes teega, millele pole vastanud ükski teine ​​​​marsruut. Seda tüüpi marsruuti kasutatakse sageli 404 lehe loomiseks või komponendi renderdamiseks kõigi sobimatute teede jaoks. Oluline on märkida, et varumarsruut peaks alati olema marsruutide loendi viimane marsruut, kuna see ühtib kõigi marsruutidega ja takistab teiste marsruutide sobitamist.

Kuidas varumarsruuti õigesti määratleda

React Routeri kasutamisel on varumarsruut marsruut, mida kasutatakse siis, kui ükski teine ​​marsruut ei vasta soovitud URL-ile. Tavaliselt kasutatakse seda kasutajate suunamiseks 404-lehele või mõnele muule lehele, kui taotletud URL-i pole olemas.

React Routeris varumarsruudi õigeks määratlemiseks peaksite esmalt looma a komponenti ja keerake see ümber oma marsruutide. Sees komponent, peaksite lisama oma tavalised marsruudid, millele järgneb a komponent, millel pole määratud teed. See on teie varumarsruut ja püüab kinni kõik päringud, mis ei ühti teie teiste marsruutidega. Seejärel saate määrata, mis peaks juhtuma selle marsruudi sobitamisel, nt suunamine 404 lehele või mõne muu sisu kuvamine.

Miks varutee alati käivitati

React Routeri varumarsruut käivitatakse alati, kui URL-i tee ei ühti ühegi olemasoleva marsruudiga. See võib juhtuda, kui kasutaja sisestab käsitsi vale URL-i või kui rakenduse marsruutimisloogika pole õigesti konfigureeritud. Varumarsruut võimaldab arendajatel neid stsenaariume graatsiliselt käsitleda ja kasutajale tagasisidet anda, näiteks 404-lehte või avalehele suunamist.