Reagiere Router mit optionalem Pfadparameter

306

Ich möchte einen Pfad mit einem optionalen Pfadparameter deklarieren. Wenn ich ihn hinzufüge, wird die Seite hinzugefügt, um etwas Besonderes zu tun (z. B. einige Daten zu füllen):

http: // localhost / app / path / to / page <= rendere die Seite http: // localhost / app / path / to / page / pathParam <= rendere die Seite mit einigen Daten gemäß pathParam

In meinem Reaktionsrouter habe ich die folgenden Pfade, um die beiden Optionen zu unterstützen (dies ist ein vereinfachtes Beispiel):

<Router history={history}>    
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

Meine Frage ist, können wir es auf einer Route deklarieren ? Wenn ich nur die zweite Zeile hinzufüge, wird die Route ohne den Parameter nicht gefunden.

EDIT # 1:

Die hier erwähnte Lösung für die folgende Syntax hat bei mir nicht funktioniert. Ist sie richtig? Existiert es in der Dokumentation?

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

Meine React-Router-Version ist: 1.0.3

tbo
quelle

Antworten:

650

Die von Ihnen veröffentlichte Bearbeitung war für eine ältere Version von React-Router (v0.13) gültig und funktioniert nicht mehr.


Reagieren Sie auf Router v1, v2 und v3

Seit der Version 1.0.0definieren Sie optionale Parameter mit:

<Route path="to/page(/:pathParam)" component={MyPage} />

und für mehrere optionale Parameter:

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

Sie verwenden Klammern ( ), um die optionalen Teile der Route zu umschließen, einschließlich des führenden Schrägstrichs ( /). Lesen Sie die Seite Route Matching Guide in der offiziellen Dokumentation.

Hinweis: Der :paramNameParameter entspricht ein URL - Segment bis zu dem nächsten /, ?oder #. Weitere Informationen zu Pfaden und Parametern finden Sie hier .


Reagiere auf Router v4 und höher

React Router v4 unterscheidet sich grundlegend von v1-v3, und optionale Pfadparameter sind auch in der offiziellen Dokumentation nicht explizit definiert .

Stattdessen werden Sie angewiesen, einen pathParameter zu definieren , den Path-to-Regexp versteht. Dies ermöglicht eine viel größere Flexibilität beim Definieren Ihrer Pfade, z. B. das Wiederholen von Mustern, Platzhaltern usw. Um einen Parameter als optional zu definieren, fügen Sie ein abschließendes Fragezeichen ( ?) hinzu.

Um einen optionalen Parameter zu definieren, gehen Sie wie folgt vor:

<Route path="/to/page/:pathParam?" component={MyPage} />

und für mehrere optionale Parameter:

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

Hinweis: React Router v4 ist nicht kompatibel mit( Lesen Sie hier mehr ). Verwenden Sie stattdessen Version v3 oder früher (v2 empfohlen).

Chris
quelle
2
Dies ist immer noch eine Frage zu mehreren optionalen Parametern in der URL, wie/route(/:category/(:article)
Alex Shwarc
1
@ AlexShwarc, guter Punkt, danke. Ich habe Code hinzugefügt, um mehrere optionale Parameter zu demonstrieren. Guck mal.
Chris
1
@ Chris Ich bin sicher, es funktioniert nicht so, hast du das überprüft?
Alex Shwarc
@ Chris mit 3 Version
Alex Shwarc
1
Kann ich einen optionalen Pfadparameter zur Hauptroute erstellen? Zum Beispiel muss ich dem Pfad einen Sprachparameter hinzufügen, und meine Homepage-URL lautet
Kholiavko
76

Für alle React Router v4-Benutzer, die nach einer Suche hier ankommen, werden optionale Parameter in a <Route>mit einem ?Suffix gekennzeichnet.

Hier ist die relevante Dokumentation:

https://reacttraining.com/react-router/web/api/Route/path-string

Pfad: Zeichenfolge

Jeder gültige URL-Pfad, den Path-to-Regexp versteht.

<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regexp#optional

Optional

Parameter können mit einem Fragezeichen (?) Angefügt werden, um den Parameter optional zu machen. Dadurch wird auch das Präfix optional.


Einfaches Beispiel für einen paginierten Abschnitt einer Site, auf den mit oder ohne Seitenzahl zugegriffen werden kann.

<Route path="/section/:page?" component={Section} />
John
quelle
@ user2928231 Danke, aktualisiert mit der neuen Dokument-URL. Soweit ich das beurteilen kann, <Match pattern />ist es jetzt <Route path />wieder so, aber das Fragezeichen-Suffix bleibt jetzt der Ansatz für die Behandlung optionaler Parameter.
John
2
Hallo! Ich habe immer noch ein Problem mit optionalen Parametern und nicht den nächsten Strecken einsetzen kann: Ich habe players, players/123, players/123/edit, players?unseen=true. Der optionale Parameter ?unseenfunktioniert bei mir nicht. obwohl ich alle Korrekturen aus dieser Diskussion ausprobiert habe. Könnten Sie bitte mit der richtigen Pfadzeichenfolge helfen, die dies handhabt? Danke im Voraus!
Khrystyna Skvarok
Hallo @KhrystynaSkvarok, haben Sie jemals herausgefunden, wie Sie Ihren Pfad mit einer optionalen Abfragezeichenfolge zum Laufen bringen können? Ich versuche das gleiche zu tun
Sabliao
2
@sabliao Hallo! Ich habe kein funktionierendes Beispiel, aber für URLs wie example.com/search?query=testversuchen Sie, das nächste Muster zu verwenden /:search(search).
Khrystyna Skvarok
Wie kann ich Parameter von URL nach Trennzeichen erhalten?
PHP Ninja
15

Arbeitssyntax für mehrere optionale Parameter:

<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />

Jetzt kann URL sein:

  1. /Sektion
  2. / section / page / 1
  3. / section / page / 1 / sort / asc
Nebojsa Sapic
quelle
1

Für React-Router V5 und höher verwenden Sie die folgende Syntax für mehrere Pfade

<Route
          exact
          path={[path1, path2]}
          component={component}
        />
Nishant Singh
quelle