Nomi di percorso multipli per uno stesso componente in React Router

113

Sto usando lo stesso componente per tre percorsi diversi:

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

C'è comunque da combinarlo, per essere come:

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

— Chetan Garg
fonte

2

A partire da react-router 4.4.0, ora puoi specificare un array di percorsi in un modo molto simile al tuo suggerimento. Vedi la mia risposta qui .

— Ben Smith

137

A partire da react-router v4.4.0-beta.4 , e ufficialmente in v5.0.0, ora puoi specificare un array di percorsi che si risolvono in un componente, ad es.

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

Ogni percorso nell'array è una stringa di espressione regolare.

La documentazione per questo approccio può essere trovata qui .

— Ben Smith
fonte

5

Credo che questa sia la risposta migliore. La risposta di @Cameron non supporta comunque la funzionalità regexp completa (almeno non sono stato in grado di farlo).

— Christopher Regner,

2

Come si imposta l' exactattributo per un singolo percorso?

— JulianSoto

1

@JulianSoto Crea una rotta verso un componente con un unico percorso insieme al percorso esatto. È quindi possibile creare un altro percorso verso lo stesso componente con un array di percorsi senza l'attributo esatto.

— Ben Smith

Non riesco yarn upgradeda 4.3 a 4.4. È stato ufficialmente rilasciato?

— ndtreviv

@ndtreviv Guardando il registro delle modifiche del router di reazione, posso vedere che la funzione è stata implementata nella v4.4.0 Beta 4. Suggerirei di eseguire l'aggiornamento all'ultima versione, che al momento della stesura di questa è v5.5.0. Puoi farlo eseguendo "Thread Upgrade React-Router --latest"

— Ben Smith

115

Almeno con react-router v4 pathpuò essere una stringa di espressione regolare, quindi puoi fare qualcosa del genere:

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

Come puoi vedere è un po 'prolisso, quindi se il tuo component/ routeè semplice come questo probabilmente non ne vale la pena.

E, naturalmente, se questo accade spesso, potresti sempre creare un componente di wrapping che accetta un pathsparametro di array , che esegue la regex o la .maplogica in modo riutilizzabile.

— Cameron
fonte

5

Ottima idea @Cameron. Ho trovato utile modificarlo un po 'per abbinare solo i percorsi che iniziano con uno dei gruppi: /^\/(home|users|widgets)/ ora, /widgetscorrisponderà, ma /dashboard/widgetsnon corrisponderà.

— Towler

4

Dovrebbe essere fantastico, ma per ora il tipo regex non è valido per la convalida dei tipi di Warning: Failed prop type: Invalid prop oggetti di scena : path` di tipo regexpfornito a Route, previsto string.`

— Fábio Paiva

@ FábioPaiva sì, non ho ancora capito come inserire

— un'espressione regolare

1

mettilo come una stringa<Route path="/(new|edit)/user/:id?" ... />

— medv

2

non funziona conpath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}

— Murtaza Hussain

43

Non credo che lo sia se usi una versione di React Router inferiore alla v4.

mapTuttavia, puoi utilizzare un come faresti con qualsiasi altro componente JSX:

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

MODIFICARE

Puoi anche usare un'espressione regolare per il percorso in react-router v4 purché sia supportata da path-to-regexp . Vedi la risposta di @ Cameron per maggiori informazioni.

— Christopher Chiche
fonte

3

Non dimenticare il keysostegno.

— Neurotrasmettitore

9

nota che ciò causerebbe (indesiderato ...?) Rimontaggi quando si passa da percorsi (ad esempio / home => / utenti in quell'esempio)

— Hertzel Guinness

Infatti! L'opportunità dipende probabilmente dal tuo caso d'uso e dai tuoi componenti. Se non vuoi rimontare, usare regexp come indicato nella mia modifica potrebbe funzionare meglio.

— Christopher Chiche

5

A partire da react-route-dom v5.1.2 puoi passare più percorsi come di seguito

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

E ovviamente devi importare il file Home jsx in alto.

— Abhishek
fonte

4

Altra opzione: usa il prefisso della rotta. /pagesper esempio. Otterrete

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

E poi risolverlo in modo dettagliato all'interno del Homecomponente.

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

— arturtr
fonte

0

Come da documentazione di React Router, il proptype 'path' è di tipo string. Quindi non c'è modo di passare un array come oggetti di scena al componente Route.

Se la tua intenzione è quella di cambiare solo percorso, puoi utilizzare lo stesso componente per percorsi diversi, senza problemi

— Vijaykrish93
fonte

1

Questa risposta non è più corretta poiché path ora accetta un array di stringhe. Vedi questa risposta .

— Ben Smith

-1

A partire da React-Router v4.4 puoi semplicemente fare qualcosa di simile sotto.

memorizzare il percorso in una variabile e passare in basso e utilizzare '|' Operatore.

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

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

quindi per tutto il percorso che corrisponde, renderà ciò di component={Home}cui hai bisogno ..

— Nischith
fonte