Rezolvat: redirecționarea ruterului 404 de reacție

Principala problemă legată de redirecționarea React Router 404 este că poate fi dificil de implementat. Deoarece React Router nu are o pagină 404 încorporată, dezvoltatorii trebuie să creeze manual o rută pentru pagina 404 și apoi să configureze routerul pentru a redirecționa orice solicitare care nu se potrivește cu o rută existentă. Acest lucru necesită cod și configurație suplimentară, ceea ce poate consuma mult timp și poate fi dificil de depanat dacă ceva nu merge bine. În plus, dacă un utilizator navighează direct la o adresă URL care nu există, va vedea în continuare o pagină de eroare în loc să fie redirecționat către pagina 404.

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

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

      {/* 404 Redirect */}
      <Route render={() => (<Redirect to="/" />)} /> 

    </Switch>
  </Router>  
);

// Linia 1: Această linie importă componentele BrowserRouter, Route și Switch din biblioteca react-router-dom.

// Linia 3: Această linie definește o funcție numită App care returnează JSX.

// Liniile 5-7: Aceste linii înglobează componenta App într-o componentă Router din react-router-dom.

// Liniile 8-10: Aceste linii definesc două rute pentru componentele Acasă și, respectiv, Despre.

// Linia 12: Această linie definește o rută care redirecționează către pagina de pornire dacă nicio altă rută nu se potrivește.

Ce este un cod de eroare 404

Un cod de eroare 404 în React Router este un cod de stare HTTP care indică faptul că resursa solicitată nu a putut fi găsită. De obicei, este returnat atunci când un utilizator încearcă să acceseze o pagină sau o rută care nu există. Acest lucru se poate întâmpla dacă utilizatorul a introdus greșit o adresă URL sau dacă pagina a fost eliminată sau mutată fără a actualiza linkurile către aceasta. Când se întâmplă acest lucru, React Router va afișa o pagină generică 404 cu un mesaj corespunzător care informează utilizatorul despre eroarea sa.

404 Redirecționare

În React Router, o redirecționare 404 este o modalitate de a redirecționa utilizatorii către o altă pagină atunci când încearcă să acceseze o adresă URL nevalidă. Acest lucru poate fi util pentru a oferi utilizatorilor o experiență mai bună atunci când introduc o adresă URL incorectă sau încearcă să acceseze o pagină care nu există. Redirecționarea 404 poate fi implementată folosind componenta Redirect de la React Router, care vă permite să specificați calea paginii către care doriți să redirecționați utilizatorul. De exemplu, dacă cineva încearcă să acceseze /invalid-url, puteți utiliza componenta Redirecționare astfel:

Postări asemănatoare:

Lăsați un comentariu