2
votes

404 pages dans React rend dans chaque page

J'ai un fichier Route qui contient plusieurs routes comme celle-ci

const SDPRouteUI = ({context}) =>
  <Switch>
    <Route exact path='/sdp/account'
      render={() =>
        <SDPAccountPageSF context={context} />
      }
    />

    <Route exact path='/sdp/activate/back'
      render={() =>
        <SDPActivateBackSF context={context} />
      }
    />
<Switch>

Le composant NotFound est rendu sur chaque page, même s'il est à l'intérieur du commutateur.

SDPRouteUI , SDPMRouteUI..etc sont d'autres fichiers de route comme

const RouteUI = ({context}) =>
  <Switch>
  <React.Fragment>

    <SDPRouteUI context={context} />

    <SDPMRouteUI context={context} />

    <ACRouteUI context={context} />

    <DCRouteUI context={context} />

    <Route path=""
      render={() =>
        <NotFound context={context} />
      }
    />

  </React.Fragment>

  </Switch>

reactjs react-router

0 commentaires

3 Réponses :

0
votes

, peut-être résoudre votre problème

Si vous définissez une route sans prop "path", le composant switch se déplacera automatiquement vers le composant NotFound.

, peut être plus utile. Pour l'itinéraire exact.

0 commentaires

1
votes

L'instruction Switch de niveau supérieur ne fonctionne pas car le premier élément n'étant pas une Route est automatiquement rendu, ce qui dans votre cas est React.Fragment . Même si vous déplacez l'élément Switch entre React.Fragment , cela ne fonctionnerait pas comme le rendrait l'autre composant par défaut.

Pour gérer les routes imbriquées, vous devez avoir un modèle Fournisseur / Consommateur. Reportez-vous à cette réponse pour gérer correctement 404 routes

2 commentaires

@ShubhamChopra S'il vous plaît laissez-moi savoir si la réponse ci-dessus vous a aidé ou non

Pas exactement mais c'était utile.

0
votes

Il est assez simple d'atteindre 404 dans le routeur de réaction. À l'intérieur du composant de routeur de réaction, créez une route sans chemin défini. Et assurez-vous de placer le code au bas de toutes les routes, afin que le routeur vérifie toutes les routes et se replie si aucune correspondance n'est trouvée.

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

const App = () => {
  return (
    <section className="App">
      <Router>
        ...
        <Switch>
          <Route exact path="/" component={IndexPage} />
          ...
          <Route exact path="/search" component={SearchPage} />
          <Route component={NoMatchPage} />
        </Switch>
      </Router>
    </section>
  );
};

...

Visitez n'importe quelle URL aléatoire, vous verrez un simple 404 page. Mais attendez, vérifions si les autres pages fonctionnent normalement sans se casser. Ce ne sera pas le cas! Vérifiez sur le lien, vous verrez à la fois environ et 404 pages être rendues. Parce que le premier routeur correspond à la route exacte pour / about chemin, puis il traverse vers le bas et charge la route 404 puisque cette route n'a pas de chemin défini. Le routeur React fournit un composant appelé Switch pour interrompre une fois qu'une route est résolue et ne charger aucun autre composant de route en dessous. C'est assez facile à mettre en œuvre. Insérez toute la route dans le composant Switch. faisons-le et faisons en sorte que la page 404 fonctionne sans erreur.

<Router>
   <Link to="/users">Users</Link>
   <Link to="/search?q=react">Search</Link>
   <Route exact path="/about" component={AboutPage} />
   <Route exact path="/search" component={SearchPage} />
   <Route component={NoMatchPage} />
</Router>

Ce composant Switch vérifiera la route correspondante, si une route est déjà correspondante, elle s'arrête en vérifiant les routes suivantes . De cette façon, nous éviterons de rendre la route 404 pour toutes les pages.

0 commentaires