it-swarm.com.de

React Router mit optionalem Pfadparameter

Ich möchte einen Pfad mit einem optionalen Pfadparameter deklarieren. Wenn ich ihn daher der Seite hinzufüge, muss ich etwas Besonderes tun (z. B. Daten füllen):

http: //localhost/app/path/to/page <= Rendern der Seite http: //localhost/app/path/to/page/pathParam <= Rendern die Seite mit einigen Daten entsprechend dem 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 in einer Route deklarieren? Wenn ich nur die zweite Zeile hinzufüge, wird die Route ohne den Parameter nicht gefunden.

EDIT # 1:

Die erwähnte Lösung hier über die folgende Syntax hat bei mir nicht funktioniert, ist es eine richtige? Existiert es in der Dokumentation?

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

Meine React-Router-Version ist: 1.0.3

260
tbo

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

Ab Version 1.0.0 definieren 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 einschließlich des führenden Schrägstrichs (/) umzubrechen. Lesen Sie die Seite Route Matching Guide der offiziellen Dokumentation.

Hinweis: Der Parameter :paramName entspricht einem URL-Segment bis zum nächsten /, ? oder #. Weitere Informationen zu Pfaden und Parametern finden Sie hier: Weitere Informationen finden Sie hier .


Reagieren Sie 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 path -Parameter zu definieren, den path-to-regexp versteht. Dies ermöglicht eine viel größere Flexibilität bei der Definition Ihrer Pfade, z. B. wiederholte Muster, Platzhalter usw. Um einen Parameter als optional zu definieren, fügen Sie ein nachfolgendes Fragezeichen (?) hinzu.

Um einen optionalen Parameter zu definieren, gehen Sie folgendermaßen 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 Inkompatibel mit React-Router-Relay ( lesen Sie hier mehr ). Verwenden Sie stattdessen Version 3 oder früher (Version 2 empfohlen).

557
Chris

Für alle React Router v4-Benutzer, die nach einer Suche hier ankommen, werden optionale Parameter in einem <Route> mit dem 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 (?) Versehen 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} />
67
John

Arbeitssyntax für mehrere optionale Parameter:

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

Jetzt kann die URL sein:

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