React Router avec le paramètre optionnel path
je veux déclarer un chemin avec un paramètre optionnel de chemin, donc quand je l'ajoute la page pour faire quelque chose de plus (par exemple remplir quelques données):
http://localhost/app/path/to/page < = rendre la page http://localhost/app/path/to/page/pathParam < = render la page avec quelques données selon le pathParam
dans mon routeur react j'ai les chemins suivants, en commande pour supporter les deux options (ceci est un exemple simplifié):
<Router history={history}>
<Route path="/path" component={IndexPage}>
<Route path="to/page" component={MyPage}/>
<Route path="to/page/:pathParam" component={MyPage}/>
</Route>
</Router>
ma question Est, pouvons-nous le déclarer dans un route? Si j'ajoute seulement la deuxième ligne, puis la route sans le paramètre n'est pas trouvé.
EDIT#1:
la solution mentionnée ici à propos de la syntaxe suivante n'a pas fonctionné pour moi, est-ce que c'est une bonne syntaxe? Existe-t-elle dans le la documentation?
<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />
ma version react-router est: 1.0.3
2 réponses
l'édition que vous avez postée était valide pour une ancienne version de React-router (v0.13)et ne fonctionne plus.
routeur à réaction v1, v2 et v3
depuis la version 1.0.0 vous définissez des paramètres optionnels avec:
<Route path="to/page(/:pathParam)" component={MyPage} />
et pour multiple optionnel paramètres:
<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />
vous utilisez les parenthèses ( ) pour envelopper les parties optionnelles de la route, y compris la barre oblique principale ( / ). Consultez la page Guide de correspondance des itinéraires de la documentation officielle.
Note: le paramètre :paramName correspond à un segment D'URL jusqu'au prochain / , ? , ou # . Pour en savoir plus sur les chemins et les params plus précisément, lire la suite ici .
Réagir Routeur v4
React Router v4 est fondamentalement différent de v1-v3, et les paramètres de chemin optionnels ne sont pas explicitement définis dans la documentation officielle non plus.
à la place, vous êtes chargé de définir un path paramètre que chemin-à-regexp comprend. Cela permet une plus grande flexibilité dans la définition de vos chemins, tels que les motifs répétitifs, les caractères génériques, etc. Afin de définir un paramètre facultatif vous pouvez ajouter un point d'interrogation ( ? ).
comme tel, pour définir un paramètre optionnel, vous faites:
<Route path="/to/page/:pathParam?" component={MyPage} />
et pour multiple optionnel paramètres:
<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />
Note: Réagir Routeur v4 est incompatible avec réagissent-routeur-relais ( lire la suite ici ). Utilisez la version v3 ou une version antérieure (v2 recommandé) à la place.
pour tous les utilisateurs du routeur React v4 arrivant ici suite à une recherche, les paramètres optionnels dans un <Route> sont signalés par un suffixe ? .
Voici la documentation pertinente:
https://reacttraining.com/react-router/web/api/Route/path-string
chemin: chaîne
N'importe quel chemin D'URL valide que chemin-de-regexp comprend.
<Route path="/users/:id" component={User}/>
https://www.npmjs.com/package/path-to-regexp#optional
facultatif
Les paramètrespeuvent être suffixés d'un point d'interrogation (?) pour rendre le paramètre facultatif. Cela rendra également le préfixe facultatif.
Simple exemple d'une section paginée d'un site qui peut être consultée avec ou sans un numéro de page.
<Route path="/section/:page?" component={Section} />