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

http: // localhost / app / path / to / page <= rendre la page http: // localhost / app / path / vers / page / pathParam <= rendre la page avec quelques données selon pathParam

Dans mon routeur React, j'ai les chemins suivants, afin de prendre en charge les deux options (il s'agit d'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 seul itinéraire? Si j'ajoute uniquement la deuxième ligne, l'itinéraire 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 une bonne? Existe-t-il dans la documentation?

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

Ma version de react-router est: 1.0.3

La modification que vous avez publiée était valide pour une ancienne version de React-router (v0.13) et ne fonctionne plus.

React Router v1, v2 et v3

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

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

et pour plusieurs paramètres facultatifs :

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

Vous utilisez des parenthèses ( )pour envelopper les parties facultatives de l'itinéraire, y compris la barre oblique ( /). Consultez la page Route Matching Guide de la documentation officielle.

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

React Router v4 et supérieur

React Router v4 est fondamentalement différent de v1-v3, et les paramètres de chemin facultatifs ne sont pas non plus explicitement définis dans la documentation officielle .

Au lieu de cela, vous êtes invité à définir un pathparamètre que path-to-regexp comprend. Cela permet une plus grande flexibilité dans la définition de vos chemins, tels que des motifs répétitifs, des caractères génériques, etc. Ainsi, pour définir un paramètre comme facultatif, vous ajoutez un point d'interrogation ( ?).

Ainsi, pour définir un paramètre facultatif, vous effectuez:

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

et pour plusieurs paramètres facultatifs :

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

Remarque: React Router v4 est incompatible avecréagir-routeur-relais( lire la suite ici ). Utilisez plutôt la version v3 ou antérieure (v2 recommandée).

Pour tous les utilisateurs de React Router v4 arrivant ici après une recherche, les paramètres facultatifs dans a <Route>sont indiqués par un ?suffixe.

Voici la documentation pertinente:

https://reacttraining.com/react-router/web/api/Route/path-string

chemin: chaîne

Tout chemin d'URL valide compris par path-to-regexp .

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

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

Optionnel

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

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 / trier / asc

pour react-router V5 et supérieur, utilisez la syntaxe ci-dessous pour plusieurs chemins

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