web-dev-qa-db-fra.com

Nom de chemin multiple pour un même composant dans React Router

J'utilise le même composant pour trois itinéraires différents:

<Router>
    <Route path="/home" component={Home} />
    <Route path="/users" component={Home} />
    <Route path="/widgets" component={Home} />
</Router>

Y a-t-il un moyen de le combiner, de ressembler à:

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>
reactjsreact-router
50
Chetan Garg

Au moins avec react-router v4, la path peut être une chaîne d'expression régulière, vous pouvez donc faire quelque chose comme ceci:

<Router>
    <Route path="/(home|users|widgets)/" component={Home} />
</Router>

Comme vous pouvez le constater, il est un peu détaillé. Par conséquent, si votre component/route est aussi simple que cela, il n’en vaut probablement pas la peine.

Et bien sûr, si cela se produit souvent, vous pouvez toujours créer un composant d'encapsulation prenant en compte un paramètre de tableau paths, qui utilise la logique regex ou .map de manière réutilisable.

67
Cameron

Je ne pense pas que c'est malheureusement. 

Vous pouvez utiliser une map comme vous le feriez avec tout autre composant JSX, mais: 

<Router>
    {["/home", "/users", "/widgets"].map((path, index) => 
        <Route path={path} component={Home} key={index} />
    )}
</Router>

MODIFIER

Vous pouvez également utiliser un regex pour le chemin dans react-router v4 tant qu'il est pris en charge par chemin-à-regexp . Voir la réponse de @ Cameron pour plus d'informations. 

36
Christopher Chiche

A partir de react-router v4.4, vous pouvez maintenant spécifier un tableau de chemins qui se résolvent en composant.

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

Chaque chemin du tableau est une chaîne d'expression régulière.

La documentation de cette approche peut être trouvée ici .

20
Ben Smith

Autre option: utiliser le préfixe de route. /pages par exemple . Vous obtiendrez

  • /pages/home
  • /pages/users
  • /pages/widgets

Et résolvez-le ensuite de manière détaillée dans le composant Home.

<Router>
  <Route path="/pages/" component={Home} />
</Router>
3
arturtr

Selon les documents de React Router, le type de propriété 'chemin' est de type chaîne. Il est donc impossible de transmettre un tableau en tant que propriété au composant Route.

Si votre intention est uniquement de changer de route, vous pouvez utiliser le même composant pour différentes routes. Aucun problème avec ce dernier.

2
Vijaykrish93

A partir de react-router v4.4, vous pouvez faire quelque chose comme ceci ci-dessous.

stocke le chemin dans une variable et passe en dessous et utilise '|' Opérateur.

let home = "/home" ;
let users = "/users”;
let widgets = "/widgets" ;

<Route path={ {home} | {users} | {widgets} }  component={Home} />

donc, pour tous les chemins correspondants, il restituera component={Home} qui correspond à vos besoins.

0
Nischith