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

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 mitReact-Router-Relais( Lesen Sie hier mehr ). Verwenden Sie stattdessen Version v3 oder früher (v2 empfohlen).

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} />

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

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

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