web-dev-qa-db-fra.com

React Router v4 rend plusieurs routes

Je crée un SPA et j'essaie de configurer le routage dans l'application à l'aide du package react-router-dom version 4.1.1.

La définition de mon itinéraire est ci-dessous:

<BrowserRouter>
  <div>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="404" component={NotFound} />
    <Route path="*" component={NotFound} />
  </div>
</BrowserRouter>

En gros, je souhaite configurer le routage de sorte que toute demande adressée à une page pour laquelle aucun itinéraire ne soit défini soit transmise au composant {NotFound}.

Comment y parvenir? La solution ci-dessus rend à la fois les composants Login et NotFound lors de la demande de la page /login.

Sincères amitiés

reactjsreact-routerreact-router-dom
13
Complexity

voici un exemple de tutoriel officiel , comment éviter de rendre plusieurs routes

import { Switch, Route } from 'react-router

    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/:user" component={User}/>
      <Route component={NoMatch}/>
    </Switch>
22
Taras Yaremkiv

Utilisez Switch pour afficher la première correspondance de la route. Vous devez importer Switch avant de pouvoir utiliser

import {Switch} from 'react-router';

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="404" component={NotFound} />
    <Route path="*" component={NotFound} />
  </Switch>
</BrowserRouter>

Selon les docs

<Switch> est unique en ce sens qu'il rend un itinéraire exclusivement. Dans Par contraste, chaque <Route> correspondant à l’emplacement rend inclusivement. 

Maintenant, si nous en sommes à /login, <Switch> commencera à chercher un correspondant <Route>. <Route path="/login"/> correspondra et <Switch> cessera de chercher des correspondances et rendra <Login>. sinon route correspond à /login avec /login et * et rend les deux routes

Toutefois, lors de l'utilisation de l'option Changer l'ordre des itinéraires, vous devez vous assurer que vous ajoutez le préfixe Itinéraires après les autres itinéraires. Par exemple '/ home' doit être placé après '/' dans l'ordre de tournage sinon vous pouvez utiliser le prop exact

 <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/home" component={Home} />
  </Switch>
10
Shubham Khatri

Je pense que la page NotFound est rendue en raison de la règle <Route path="*" component={NotFound} />. La propriété Path du routeur accepte Tout chemin d'URL valide que path-to-regexp comprend. So '*' signifie zéro ou plusieurs correspondances de paramètres

0
Serg