Plusieurs noms de chemin pour un même composant dans React Router

114

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>

— Chetan Garg
source

2

Depuis react-router 4.4.0, vous pouvez maintenant spécifier un tableau de chemins d'une manière très similaire à votre suggestion. Voir ma réponse ici .

— Ben Smith

140

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 .

— Ben Smith
source

5

Je pense que c'est la meilleure réponse. De toute façon, la réponse de @Cameron ne supporte pas la fonctionnalité d'expression régulière complète (du moins je n'ai pas pu le faire).

— Christopher Regner

2

Comment définir l' exactattribut pour un seul chemin?

— JulianSoto

1

@JulianSoto Créez une route vers un composant avec un seul chemin avec le chemin exact. Vous pouvez ensuite créer une autre Route vers le même composant avec un tableau de chemins sans l'attribut exact.

— Ben Smith

Je ne peux pas yarn upgradede 4.3 à 4.4. Est-il officiellement publié?

— ndtreviv

@ndtreviv En regardant le journal des modifications du routeur de réaction, je peux voir que la fonctionnalité a été déployée dans la v4.4.0 Beta 4. Je recommanderais la mise à niveau vers la dernière version, qui au moment de la rédaction est la v5.5.0. Vous pouvez faire ceci en cours d'exécution "yarn upgrade react-router --latest"

— Ben Smith

115

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.

— Cameron
source

5

Excellente idée @Cameron. J'ai trouvé utile de le modifier un peu pour qu'il corresponde uniquement aux chemins commençant par l'un des groupes: /^\/(home|users|widgets)/ maintenant, /widgetscorrespondra, mais /dashboard/widgetsne correspondra pas.

— Towler

4

Ça devrait être génial, mais pour l'instant, le type regex n'est pas valide sur la validation des types de prop: Warning: Failed prop type: Invalid prop chemin` du type regexpfourni à Route, attendu string.`

— Fábio Paiva

@ FábioPaiva ouais, je n'ai toujours pas compris comment mettre une expression

— régulière

1

mettez-le comme une chaîne<Route path="/(new|edit)/user/:id?" ... />

— medv

2

ne travaille pas avecpath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}

— Murtaza Hussain

43

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.

— Christophe Chiche
source

3

N'oubliez pas l' keyaccessoire.

— Neurotransmetteur

9

notez que cela provoquerait (indésirable ...?) des remontages lors du changement de chemins (par exemple / home => / users dans cet exemple)

— Hertzel Guinness

En effet! L'opportunité dépend probablement de votre cas d'utilisation et de vos composants. Si vous ne voulez pas remonter, utiliser l'expression rationnelle comme indiqué dans ma modification pourrait mieux fonctionner.

— Christopher Chiche

6

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

— Abhishek
source

4

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>

— arturtr
source

0

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

— Vijaykrish93
source

1

Cette réponse n'est plus correcte car path accepte désormais un tableau de chaînes. Voyez cette réponse .

— Ben Smith

-1

À 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

— Nischith
source