webentwicklung-frage-antwort-db.com.de

React Router v4 gibt mehrere Routen aus

Ich erstelle ein SPA und versuche, Routing in der Anwendung mit der react-router-dom-Paketversion 4.1.1 einzurichten.

Meine Streckendefinition ist unten:

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

Grundsätzlich möchte ich das Routing so einrichten, dass jede Anforderung an eine Seite, für die keine Route definiert ist, an die {NotFound}-Komponente geht.

Wie kann dies erreicht werden? Die obenstehende Lösung rendert die Komponente Login und NotFound, wenn die Seite /login angefordert wird.

Mit freundlichen Grüßen

reactjsreact-routerreact-router-dom
13
Complexity

hier ist ein Beispiel aus offiziellem Tutorial , wie Sie das Rendern mehrerer Routen vermeiden

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

Verwenden Sie Switch, um die erste Übereinstimmung der Route darzustellen. Sie müssen Switch importieren, bevor Sie sie verwenden können

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>

Nach den docs

<Switch> ist insofern einzigartig, als er ausschließlich eine Route darstellt. Im Im Gegensatz dazu wird jeder <Route>, der mit dem Ort übereinstimmt, einschließlich. 

Wenn wir jetzt bei /login sind, wird <Switch> nach einem .__ suchen. übereinstimmender <Route>. <Route path="/login"/> stimmt mit und <Switch>.__ überein. stoppt die Suche nach Übereinstimmungen und rendert <Login>. ansonsten Route stimmt /login mit /login und * überein und rendert beide Routen

Wenn Sie jedoch die Reihenfolge der Routen ändern wählen, müssen Sie sicherstellen, dass Sie die Präfixrouten nach den anderen Routen hinzufügen. Für z. '/ home' muss in der Routenreihenfolge hinter '/' stehen, andernfalls können Sie die exact-Eigenschaft verwenden

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

Ich denke, die NotFound-Seite wird aufgrund der <Route path="*" component={NotFound} />-Regel gerendert. Die Pfadeigenschaft des Routers akzeptiert Jeder gültige URL-Pfad, den der Pfad-zu-Regex-Befehl kennt. '*' bedeutet null oder mehr Parameterübereinstimmungen

0
Serg