React Router con parámetro de ruta opcional

306

Quiero declarar una ruta con un parámetro de ruta opcional, por lo tanto, cuando lo agrego, la página hace algo extra (por ejemplo, llenar algunos datos):

http: // localhost / app / path / to / page <= renderizar la página http: // localhost / app / path / to / page / pathParam <= renderizar la página con algunos datos de acuerdo con el pathParam

En mi enrutador de reacción, tengo las siguientes rutas para admitir las dos opciones (este es un ejemplo simplificado):

<Router history={history}>    
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

Mi pregunta es, ¿podemos declararlo en una ruta? Si agrego solo la segunda fila, entonces no se encuentra la ruta sin el parámetro.

EDITAR # 1:

La solución mencionada aquí sobre la siguiente sintaxis no funcionó para mí, ¿es adecuada? ¿Existe en la documentación?

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

Mi versión del router de reacción es: 1.0.3

tbo
fuente

Respuestas:

650

La edición que publicó fue válida para una versión anterior de React-router (v0.13) y ya no funciona.


React Router v1, v2 y v3

Desde la versión, 1.0.0usted define parámetros opcionales con:

<Route path="to/page(/:pathParam)" component={MyPage} />

y para múltiples parámetros opcionales :

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

Utiliza paréntesis ( )para ajustar las partes opcionales de la ruta, incluida la barra inclinada ( /). Consulte la página de la Guía de coincidencia de rutas de la documentación oficial.

Nota: El :paramNameparámetro coincide con un segmento URL hasta la próxima /, ?o #. Para obtener más información sobre rutas y parámetros específicamente, lea más aquí .


React Router v4 y superior

React Router v4 es fundamentalmente diferente de v1-v3, y los parámetros de ruta opcionales tampoco están definidos explícitamente en la documentación oficial .

En su lugar, se le indica que defina un pathparámetro que path-to-regexp entienda. Esto permite una flexibilidad mucho mayor en la definición de sus rutas, como patrones repetitivos, comodines, etc. Entonces, para definir un parámetro como opcional, agregue un signo de interrogación final ( ?).

Como tal, para definir un parámetro opcional, usted hace:

<Route path="/to/page/:pathParam?" component={MyPage} />

y para múltiples parámetros opcionales :

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

Nota: React Router v4 es incompatible con( lea más aquí ). Utilice la versión v3 o anterior (se recomienda la v2).

Chris
fuente
2
Esta sigue siendo una pregunta sobre múltiples parámetros opcionales en URL, como/route(/:category/(:article)
Alex Shwarc
1
@AlexShwarc, buen punto, gracias. Agregué código para demostrar múltiples parámetros opcionales. Echar un vistazo.
Chris
1
@ Chris Estoy seguro, no funciona de esta manera, ¿lo has comprobado?
Alex Shwarc
@Chris con la versión 3
Alex Shwarc
1
¿Puedo crear un parámetro de ruta opcional a la ruta principal? Por ejemplo, necesito agregar el parámetro de idioma a la ruta, y la URL de mi página de inicio será "/" y "/ en" Aquí está la demostración
Kholiavko
76

Para cualquier usuario de React Router v4 que llegue aquí después de una búsqueda, los parámetros opcionales en a <Route>se denotan con un ?sufijo.

Aquí está la documentación relevante:

https://reacttraining.com/react-router/web/api/Route/path-string

ruta: cadena

Cualquier ruta URL válida que path-to-regexp entienda.

<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regexp#optional

Opcional

Los parámetros se pueden agregar con un signo de interrogación (?) Para que el parámetro sea opcional. Esto también hará que el prefijo sea opcional.


Ejemplo simple de una sección paginada de un sitio al que se puede acceder con o sin un número de página.

<Route path="/section/:page?" component={Section} />
Juan
fuente
@ user2928231 Gracias, actualizado con sus nuevos documentos url. Por lo que puedo decir, <Match pattern />ahora es <Route path />nuevamente, pero el sufijo de signo de interrogación sigue siendo el enfoque ahora para manejar parámetros opcionales.
John
2
¡Hola! Todavía tengo un problema con el parámetro opcional y no puedo hacer siguientes rutas de trabajo: Tengo players, players/123, players/123/edit, players?unseen=true. El parámetro opcional ?unseenno funciona para mí. aunque probé todas las soluciones de esta discusión. ¿Podría ayudarme con la cadena de ruta adecuada, que manejará esto? ¡Gracias por adelantado!
Khrystyna Skvarok
Hola @KhrystynaSkvarok, ¿alguna vez descubriste cómo hacer que funcione tu ruta con una cadena de consulta opcional? Estoy tratando de hacer lo mismo
sabliao
2
@sabliao Hola! No tengo un ejemplo de trabajo, pero para URL como example.com/search?query=testintentar usar el siguiente patrón /:search(search).
Khrystyna Skvarok
¿Cómo puedo obtener parámetros de url después del delimitador?
PHP Ninja
15

Sintaxis de trabajo para múltiples parámetros opcionales:

<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />

Ahora, url puede ser:

  1. /sección
  2. / section / page / 1
  3. / section / page / 1 / sort / asc
Nebojsa Sapic
fuente
1

para react-router V5 y superior use la sintaxis siguiente para múltiples rutas

<Route
          exact
          path={[path1, path2]}
          component={component}
        />
Nishant Singh
fuente