Mehrere Pfadnamen für dieselbe Komponente in React Router

112

Ich verwende dieselbe Komponente für drei verschiedene Routen:

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

Gibt es sowieso zu kombinieren, um zu sein wie:

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>
javascript reactjs path react-router url-routing Chetan Garg
quelle
2
Ab React-Router 4.4.0 können Sie jetzt ein Array von Pfaden auf eine Weise angeben, die Ihrem Vorschlag sehr ähnlich ist. Siehe meine Antwort hier .
Ben Smith

Antworten:

132

Ab React -Router v4.4.0-beta.4 und offiziell in v5.0.0 können Sie jetzt ein Array von Pfaden angeben, die in eine Komponente aufgelöst werden, z

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

Jeder Pfad im Array ist eine Zeichenfolge mit regulären Ausdrücken.

Die Dokumentation zu diesem Ansatz finden Sie hier .

Ben Smith
quelle
5
Ich glaube, das ist die beste Antwort. Die Antwort von @Cameron unterstützt sowieso nicht die vollständige Regexp-Funktion (zumindest konnte ich das nicht).
Christopher Regner
2
Wie lege ich das exactAttribut für einen einzelnen Pfad fest?
JulianSoto
1
@JulianSoto Erstellen Sie eine Route zu einer Komponente mit einem einzelnen Pfad zusammen mit dem genauen Pfad. Sie können dann eine weitere Route zu derselben Komponente mit einem Array von Pfaden ohne das genaue Attribut erstellen.
Ben Smith
Ich kann nicht yarn upgradevon 4.3 bis 4.4. Ist es offiziell freigegeben?
Ndtreviv
@ndtreviv Wenn ich mir das Änderungsprotokoll des Reaktionsrouters ansehe, kann ich sehen, dass die Funktion in Version 4.4.0 Beta 4 eingeführt wurde. Ich würde empfehlen, auf die neueste Version zu aktualisieren, die zum Zeitpunkt des Schreibens Version 5.5.0 ist. Sie können dies mit "Garn Upgrade React-Router - neueste"
Ben Smith
115

Zumindest mit React-Router v4 pathkann dies eine Zeichenfolge mit regulären Ausdrücken sein, sodass Sie Folgendes tun können:

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

Wie Sie sehen können, ist es ein bisschen ausführlich. Wenn Ihr component/ routeso einfach ist, ist es das wahrscheinlich nicht wert.

Und wenn dies tatsächlich häufig vorkommt, können Sie natürlich immer eine Wrapping-Komponente erstellen, die einen Array- pathsParameter enthält, der den .mapregulären Ausdruck oder die Logik wiederverwendbar macht.

Cameron
quelle
5
Tolle Idee @Cameron. Ich fand es nützlich, es ein wenig zu ändern, um nur Pfaden zu entsprechen, die mit einer der Gruppen beginnen: /^\/(home|users|widgets)/ Jetzt /widgetswird übereinstimmen, aber /dashboard/widgetsnicht übereinstimmen.
Towler
4
Sollte großartig sein, aber im Moment ist der Typ Regex für die Validierung von Requisitentypen nicht gültig: Warning: Failed prop type: Invalid prop Pfad "des Typs, der regexpgeliefert wird Route, erwartet. string"
Fábio Paiva
@ FábioPaiva Ja, ich habe immer noch nicht herausgefunden, wie man einen beliebigen
regulären Ausdruck
1
Setzen Sie es als Zeichenfolge ein<Route path="/(new|edit)/user/:id?" ... />
medv
2
funktioniert nicht mitpath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}
Murtaza Hussain
43

Ich glaube nicht, dass es so ist, wenn Sie eine Version von React Router verwenden, die niedriger als v4 ist.

Sie können a jedoch mapwie jede andere JSX-Komponente verwenden:

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

BEARBEITEN

Sie können auch einen regulären Ausdruck für den Pfad in React-Router v4 verwenden, sofern dieser vom Pfad zum regulären Ausdruck unterstützt wird . Weitere Informationen finden Sie in der Antwort von @ Cameron.

Christopher Chiche
quelle
3
Vergiss die keyRequisite nicht.
Neurotransmitter
9
Beachten Sie, dass dies beim Wechseln von Pfaden (z. B. / home => / users in diesem Beispiel) zu (unerwünschten ...?) Remounts führen würde
Hertzel Guinness,
Tatsächlich! Die Wünschbarkeit hängt wahrscheinlich von Ihrem Anwendungsfall und Ihren Komponenten ab. Wenn Sie nicht erneut bereitstellen möchten, funktioniert die Verwendung von regulärem Ausdruck, wie in meiner Bearbeitung angegeben, möglicherweise besser.
Christopher Chiche
4

Andere Option: Verwenden Sie das Routenpräfix. /pagesbeispielsweise. Sie erhalten

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

Und dann lösen Sie es detailliert innerhalb der HomeKomponente.

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

Ab React-Route-Dom v5.1.2 können Sie mehrere Pfade wie folgt übergeben

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

Und natürlich müssen Sie die Home-JSX-Datei oben importieren.

Abhishek
quelle
0

Gemäß den React Router-Dokumenten ist der Proptyp 'Pfad' vom Typ Zeichenfolge. Es gibt also keine Möglichkeit, ein Array als Requisiten an die Routenkomponente zu übergeben.

Wenn Sie nur die Route ändern möchten, können Sie dieselbe Komponente für unterschiedliche Routen verwenden, ohne dass dies Probleme verursacht

Vijaykrish93
quelle
1
Diese Antwort ist nicht mehr korrekt, da der Pfad jetzt ein Array von Zeichenfolgen akzeptiert. Siehe diese Antwort .
Ben Smith
-1

Ab React-Router v4.4 können Sie so etwas wie folgt tun.

Speichern Sie den Pfad in einer Variablen und übergeben Sie ihn unten und verwenden Sie '|' Operator.

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

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

Für alle Pfade, mit denen es übereinstimmt, wird es gerendert, component={Home}was Ihr Bedarf ist.

Nischith
quelle