Múltiples nombres de ruta para un mismo componente en React Router

113

Estoy usando el mismo componente para tres rutas diferentes:

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

¿Hay alguna forma de combinarlo, para ser como:

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>
javascript reactjs path react-router url-routing Chetan Garg
fuente
2
A partir de react-router 4.4.0, ahora puede especificar una matriz de rutas de una manera muy similar a su sugerencia. Vea mi respuesta aquí .
Ben Smith

Respuestas:

137

A partir de react-router v4.4.0-beta.4 , y oficialmente en v5.0.0, ahora puede especificar una serie de rutas que se resuelven en un componente, por ejemplo

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

Cada ruta de la matriz es una cadena de expresión regular.

La documentación para este enfoque se puede encontrar aquí .

Ben Smith
fuente
5
Creo que esta es la mejor respuesta. La respuesta de @Cameron no admite la función de expresión regular completa de todos modos (al menos no pude hacerlo).
Christopher Regner
2
¿Cómo configuro el exactatributo para una única ruta?
JulianSoto
1
@JulianSoto Cree una ruta a un componente con una sola ruta junto con la ruta exacta. Luego, puede crear otra ruta al mismo componente con una matriz de rutas sin el atributo exacto.
Ben Smith
No puedo yarn upgradede 4.3 a 4.4. ¿Está lanzado oficialmente?
ndtreviv
@ndtreviv Mirando el registro de cambios de enrutador de reacción, puedo ver que la función se implementó en v4.4.0 Beta 4. Recomiendo actualizar a la última versión, que en el momento de escribir esto es v5.5.0. Puede hacer esto ejecutando "Yarn Upgrade react-router --latest"
Ben Smith
115

Al menos con react-router v4, pathpuede ser una cadena de expresión regular, por lo que puede hacer algo como esto:

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

Como puede ver, es un poco detallado, por lo que si su component/ routees tan simple como este, probablemente no valga la pena.

Y, por supuesto, si esto surge con frecuencia, siempre puede crear un componente de envoltura que tome un pathsparámetro de matriz , que haga la expresión regular o la .maplógica de manera reutilizable.

Cameron
fuente
5
Gran idea @Cameron. Encontré útil modificarlo un poco para que coincida solo con las rutas que comienzan con uno de los grupos: /^\/(home|users|widgets)/ Ahora, /widgetscoincidirá, pero /dashboard/widgetsno coincidirá.
Towler
4
Debería ser genial, pero por ahora el tipo de expresión regular no es válido en la validación de tipos de prop: Warning: Failed prop type: Invalid prop ruta` del tipo regexpproporcionado a Route, esperado string.`
Fábio Paiva
@ FábioPaiva sí, todavía no he descubierto cómo poner una expresión regular arbitraria en la ruta
Atav32
1
ponerlo como una cadena<Route path="/(new|edit)/user/:id?" ... />
medv
2
no funciona conpath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}
Murtaza Hussain
43

No creo que lo sea si usa una versión de React Router inferior a la v4.

Sin mapembargo, puede usar un como lo haría con cualquier otro componente JSX:

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

EDITAR

También puede utilizar una expresión regular para la ruta en react-router v4 siempre que sea compatible con la ruta a la expresión regular . Consulte la respuesta de @ Cameron para obtener más información.

Christopher Chiche
fuente
3
No olvides el keyaccesorio.
Neurotransmisor
9
tenga en cuenta que esto causaría remontes (¿no deseados ...?) al cambiar de rutas (por ejemplo, / home => / users en ese ejemplo)
Hertzel Guinness
¡En efecto! La conveniencia probablemente depende de su caso de uso y sus componentes. Si no desea volver a montar, usar regexp como se indica en mi edición podría funcionar mejor.
Christopher Chiche
5

A partir de react-route-dom v5.1.2, puede pasar varias rutas como se muestra a continuación

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

Y, obviamente, debe importar el archivo jsx de inicio en la parte superior.

Abhishek
fuente
4

Otra opción: usar prefijo de ruta. /pagespor ejemplo. Conseguirás

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

Y luego resolverlo de forma detallada dentro del Homecomponente.

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

Según los documentos de React Router, el proptype 'path' es de tipo string. Por lo tanto, no hay forma de que pueda pasar una matriz como accesorios al componente de ruta.

Si su intención es solo cambiar la ruta, puede usar el mismo componente para una ruta diferente sin problemas con eso

Vijaykrish93
fuente
1
Esta respuesta ya no es correcta ya que la ruta ahora acepta una matriz de cadenas. Vea esta respuesta .
Ben Smith
-1

A partir de react-router v4.4, puede hacer algo como esto a continuación.

almacenar la ruta en una variable y pasar a continuación y usar '|' Operador.

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

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

por lo que para todas las rutas que coincidan, representará component={Home}cuál es su necesidad.

Nischith
fuente