web-dev-qa-db-fra.com

React Router avec paramètre de chemin optionnel

Je veux déclarer un chemin avec un paramètre de chemin facultatif, par conséquent, lorsque je l'ajoute, la page permet de faire quelque chose de plus (par exemple, remplir des données):

http: // localhost/app/chemin/to/page <= rendre la page http: // localhost/app/chemin/to/page/pathParam <= rendre la page avec quelques données en fonction de pathParam

Dans mon routeur de réaction, j'ai les chemins suivants, afin de prendre en charge 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 la suivante: pouvons-nous le déclarer dans une route? Si j'ajoute seulement la deuxième ligne, la route sans paramètre n'est pas trouvée.

EDIT # 1:

La solution mentionnée ici à propos de la syntaxe suivante n'a pas fonctionné pour moi, est-ce une bonne? Existe-t-il dans la documentation?

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

La version de ma réaction-routeur est: 1.0.3

javascriptreactjsreact-routerreact-router-v4
245
tbo

Le montage que vous avez posté était valable pour une ancienne version de React-router (v0.13) et ne fonctionne plus.

React Router v1, v2 et v3

Depuis la version 1.0.0, vous définissez des paramètres facultatifs avec:

<Route path="to/page(/:pathParam)" component={MyPage} />

et pour plusieurs paramètres optionnels :

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

Vous utilisez la parenthèse () pour envelopper les parties facultatives de route, , y compris la barre oblique (/). Consultez la page Guide de correspondance d'itinéraire de la documentation officielle.

Remarque: Le paramètre :paramName correspond à un segment d'URL jusqu'au suivant. /, ? ou #. Pour en savoir plus sur les chemins et paramètres en particulier, en savoir plus ici .

React Router v4 et supérieur

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 .

Au lieu de cela, vous devez définir un paramètre path compris par path-to-regexp . Cela permet une plus grande flexibilité dans la définition de vos chemins, tels que les motifs répétés, les caractères génériques, etc. Ainsi, pour définir un paramètre comme facultatif, vous ajoutez un point d'interrogation final (?).

En tant que tel, pour définir un paramètre facultatif, vous procédez comme suit:

<Route path="/to/page/:pathParam?" component={MyPage} />

et pour plusieurs paramètres optionnels :

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

Remarque: React Router v4 est incompatible avec react-router-relay ( en savoir plus ici ). Utilisez la version v3 ou antérieure (v2 recommandée) à la place.

523
Chris

Pour tous les utilisateurs de React Router v4 arrivant ici à la suite d'une recherche, les paramètres facultatifs d'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 de caractères

Tout chemin d'URL valide que path-to-regexp comprend.

<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regexp#optional

Facultatif

Les paramètres peuvent être suffixés d'un point d'interrogation (?) Pour rendre le paramètre facultatif. Cela rendra également le préfixe facultatif.

Exemple simple d'une section paginée d'un site accessible avec ou sans numéro de page.

<Route path="/section/:page?" component={Section} />
63
John

Syntaxe de travail pour plusieurs paramètres facultatifs:

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

Maintenant, l'URL peut être:

  1. /section
  2. / section/page/1
  3. / section/page/1/tri/asc
1
Nebojsa Sapic