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

Question

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>
 

Answer 1

À partir de la version 4.4 de react-router, vous pouvez maintenant spécifier un tableau de chemins d'accès à un composant, par exemple:

 <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 .

Answer 2

Au moins avec réagissent-routeur v4 l' path peut être une expression régulière, de sorte que vous pouvez faire quelque chose comme ceci:

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

Comme vous pouvez le voir, c'est un peu verbeux, donc si votre component/route est simple comme cela, il n'est probablement pas la peine.

Et bien sûr, si cela arrive souvent, vous pouvez toujours créer un emballage de composants qui prend un tableau paths paramètre, qui n'est que l'expression régulière ou .map logique reusably.

Answer 3

Je ne pense pas que ce soit malheureusement.

Vous pouvez utiliser un map comme vous le feriez avec tout autre JSX composant:

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

MODIFIER

Vous pouvez également utiliser une regex pour le chemin d'accès à réagir-routeur v4 , tant que c'est pris en charge par chemin-de-regexp. Voir @Cameron réponse pour plus d'info.

Answer 4

Autre option: utiliser le préfixe de route. /pages par exemple. Tu auras

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

Answer 5

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 props au composant de 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.