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
Die von Ihnen veröffentlichte Bearbeitung war für eine ältere Version von React-router (v0.13) gültig und funktioniert nicht mehr.
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 .
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).
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} />
Arbeitssyntax für mehrere optionale Parameter:
<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />
Jetzt kann die URL sein: