Yakagadziriswa: react router reload peji haina kuwanikwa

Dambudziko guru rine chekuita neReact Router reload peji harina kuwanikwa nderekuti kana mushandisi akazorodza peji, bhurawuza rinoedza kuita chikumbiro kuseva cheiyo URL iripo. Nekudaro, sezvo React Router iri mutengi-parutivi nzira, hapana inoenderana server nzira yeiyo URL uye nekudaro 404 Haina Kuwanikwa kukanganisa inodzoswa. Izvi zvinogona kunyanya kunetsa kana vashandisi vari kutarisira kuti zvimwe zvemukati zvionekwe pakuvandudza.

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

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

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// Mutsara 1: Mutsetse uyu unopinza kunze BrowserRouter, Route, uye Shandura zvikamu kubva kune react-router-dom raibhurari.

// Mutsara 3: Mutsara uyu unotsanangura basa rinonzi App rinodzorera JSX code.

// Mutsara wechishanu: Uyu mutsara unoputira iyo yose JSX kodhi muRouter chikamu kubva kune react-router-dom.

// Mutsara wechitanhatu: Uyu mutsara unoputira ese enzira muChinja chikamu kubva kune react-router-dom.

.

.

Peji haina kuwanikwa kukanganisa

Peji haina kuwanikwa kukanganisa muReact Router iko kukanganisa kunoitika kana mushandisi achiedza kuwana peji kana nzira isipo. Izvi zvinogona kuitika kana mushandisi akataipa URL, kana kuti peji yavari kuedza kuwana yabviswa kana kutamiswa. MuReact Router, kukanganisa uku kunobatwa nekushandisa iyo chikamu chinopa prop uye kupfuura mune basa rinodzosa peji 404. Izvi zvinobvumira vanogadzira kuti vagadzire mapeji e404 ane chero chinhu chavanoda, senge malink anobatsira kana meseji yekukumbira ruregerero.

Ini ndinobata sei Peji isina kuwanikwa Mune react router

Paunenge uchishandisa React Router, unogona kubata peji risingawanikwe nekugadzira tsika nzira iyo inopa NotFound chikamu kana iyo URL isingaenderane neipi yenzira dziripo. Kuti uite izvi, unofanirwa kugadzira nzira nyowani ine nzira yakaiswa ku "*" uye kupa yako NotFound chikamu.

Semuyenzaniso:

} />

Izvi zvichaenderana nechero URL isati yatofananidzwa nenzira iripo uye inopa yako NotFound chikamu.

Ndinomanikidza sei peji rinoita kuti ridzore zvakare

MuReact Router, unogona kumanikidza peji kurodha zvakare uchishandisa nzira yekutsiva pane chinhu chenhoroondo. Izvi zvichatsiva iyo iripo munhoroondo stack neitsva, nokudaro kumanikidza kurodhazve peji. Kuti ushandise nzira iyi, unofanirwa kutanga wawana mukana kune chinhu chenhoroondo. Iwe unogona kuita izvi nekuchipfuudza seprop paunenge uchigadzira yako router chikamu:

const AppRouter = () => (

{/* Nzira dzako pano */}

);

Kana uchinge wawana mukana kune chinhu chenhoroondo, unogona kushandisa nzira yekutsiva senge:

history.replace('/some-route');