Plusieurs noms de chemin 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 de toute façon le combiner, pour être comme:

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

Depuis react -router v4.4.0-beta.4 , et officiellement dans v5.0.0, vous pouvez maintenant spécifier un tableau de chemins qui se résolvent en 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 .

Au moins avec react-router v4, il pathpeut s'agir d'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 voir, c'est un peu verbeux, donc si votre component/ routeest simple comme ça, cela 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 qui prend un pathsparamètre de tableau , ce qui fait le regex ou la .maplogique de manière réutilisable.

Je ne pense pas que ce soit le cas si vous utilisez une version de React Router inférieure à la v4.

Vous pouvez utiliser a mapcomme vous le feriez avec n'importe quel autre composant JSX:

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

ÉDITER

Vous pouvez également utiliser une expression régulière pour le chemin dans react-router v4 tant qu'il est pris en charge par path-to-regexp . Voir la réponse de @ Cameron pour plus d'informations.

À partir de react-route-dom v5.1.2, vous pouvez passer plusieurs chemins comme ci-dessous

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

Et évidemment, vous devez importer le fichier jsx Home en haut.

Autre option: utilisez le préfixe d'itinéraire. /pagespar exemple. Tu auras

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

Et puis résolvez-le de manière détaillée à l'intérieur du Homecomposant.

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

Selon la documentation de React Router, le proptype 'path' est de type string. Il n'y a donc aucun moyen de passer un tableau en tant qu'accessoires au composant Route.

Si votre intention est de changer uniquement d'itinéraire, vous pouvez utiliser le même composant pour différents itinéraires sans aucun problème

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

stockez le chemin dans une variable et passez-le ci-dessous et utilisez '|' Opérateur.

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

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

donc pour tous les chemins component={Home}auxquels il correspond, il rendra ce dont vous avez besoin