Ich möchte einen Pfad mit einem optionalen Pfad-Parameter zu deklarieren, daher, wenn ich es die Seite hinzufügen, um etwas extra zu tun (z. B. füllen einige Daten):
http://localhost/app/path/to/page <= die Seite rendern http://localhost/app/path/to/page/pathParam <= Rendern der Seite mit einige Daten entsprechend dem pathParam
In meinem React-Router 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 das in 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 über die folgende Syntax hat bei mir nicht funktioniert, ist das eine richtige Lösung? Gibt es sie in der Dokumentation?
<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />
Meine react-router Version ist: 1.0.3
Die Bearbeitung, die Sie gepostet haben, galt für eine ältere Version von React-router (v0.13) und funktioniert nicht mehr.
Seit Version 1.0.0
definieren Sie optionale Parameter mit:
<Route path="to/page(/:pathParam)" component={MyPage} />
und bei mehreren optionalen Parametern:
<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />
Sie verwenden Klammern (
)
, um die optionalen Teile von route zu umschließen, einschließlich des führenden Schrägstrichs (/
). Sehen Sie sich die Seite Route Matching Guide der offiziellen Dokumentation an.
Hinweis: Der Parameter :paramName
passt zu einem URL-Segment bis zum nächsten /
, ?
, oder #
. Für weitere Informationen über Pfade und Parameter, lesen Sie hier.
React Router v4 unterscheidet sich grundlegend von v1-v3, und optionale Pfadparameter sind auch nicht explizit in der offiziellen Dokumentation definiert.
Stattdessen wird man angewiesen, einen "path"-Parameter zu definieren, den path-to-regexp versteht. Dies erlaubt eine viel größere Flexibilität bei der Definition Ihrer Pfade, wie z.B. sich wiederholende Muster, Wildcards, etc. Um also einen Parameter als optional zu definieren, fügen Sie ein Fragezeichen (?
) am Ende ein.
Um also einen optionalen Parameter zu definieren, tun Sie dies:
<Route path="/to/page/:pathParam?" component={MyPage} />
und bei mehreren optionalen Parametern:
<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />
Hinweis: *React Router v4 ist inkompatibel mit [tag:react-router-relay] (mehr dazu hier). Verwenden Sie stattdessen Version v3 oder früher (v2 empfohlen).
Für alle Benutzer von React Router v4, die nach einer Suche hierher kommen, werden optionale Parameter in einer "Route" mit dem Suffix "?" gekennzeichnet.
Hier ist die entsprechende Dokumentation:
https://reacttraining.com/react-router/web/api/Route/path-string
Pfad: Zeichenkette
Jeder gültige URL-Pfad, den path-to-regexp versteht.
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 Website, der mit oder ohne Seitenzahl aufgerufen 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: