web-dev-qa-db-fra.com

Paramètres multiples avec React Router

J'utilise React 15.0.2 et React Router 2.4.0 . Je souhaite transmettre plusieurs paramètres à mon itinéraire et je ne sais pas comment le faire de la meilleure façon possible:

<Route name="User" path="/user" component={UserPage}>   
    <Route name="addTaskModal" path="/user/manage:id" component={ManageTaskPage} />
</Route>

Et ce qui est besoin, c'est quelque chose comme:

 <Route name="User" path="/user" component={UserPage}>  
    <Route name="addTaskModal" path="/user/manage:id:type" component={ManageTaskPage} />
</Route>
reactjsreact-router
15
Frix G

Comme @ alexander-t a mentionné:

path="/user/manage/:id/:type"

Si vous voulez les garder facultatifs:

path="/user/manage(/:id)(/:type)"

React Router v4

React Router v4 est différent de v1-v3 et les paramètres de chemin facultatif ne sont pas explicitement définis dans documentation .

Au lieu de cela, vous devez définir un paramètre de chemin que path-to-regexp comprend. 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 (?).

Donc, pour définir des paramètres optionnels, vous pouvez faire:

path="/user/manage/:pathParam1?/:pathParam2?"

c'est à dire.

<Route path="/user/manage/:pathParam1?/:pathParam2?" component={MyPage} />

Considérant que, les paramètres obligatoires sont toujours les mêmes dans V4:

path="/user/manage/:id/:type"

Pour accéder à la valeur de PathParam, vous pouvez faire:

this.props.match.params.pathParam1
41
Tomas Randus

Pour les champs optionnels param, pour une raison quelconque, cela fonctionne bien sans la barre oblique avant les deux points à l'intérieur des accolades (). React-router 2.6x

0
Har

Essaye ça

<Route name="User" path="/user" component={UserPage}>  
  <Route name="addTaskModal" path="/user/manage/:id/:type" component={ManageTaskPage} />
</Route>
0
sultan aslam