React Router con el parámetro de ruta opcional
Quiero declarar una ruta con un parámetro de ruta opcional, por lo que cuando la añado la página para hacer 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 según el pathParam
En mi react router tengo las siguientes rutas, para soportar 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, ¿se puede declarar en una ruta? Si añado sólo la segunda fila entonces la ruta sin el parámetro no se encuentra.
EDIT#1:
La solución mencionada aquí sobre la siguiente sintaxis no me ha funcionado, ¿es la adecuada? ¿Existe en la documentación?
<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />Mi versión de react-router es: 1.0.3
279
3
La edición que has publicado era 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.0se definen parámetros opcionales con:y para múltiples parámetros opcionales:
Se utilizan paréntesis
(``)para envolver las partes opcionales de la ruta, incluyendo la barra inclinada (/). Consulte la página Guía de coincidencia de rutas de la documentación oficial.Nota: El parámetro
:paramNamecoincide con un segmento de URL hasta el siguiente/,?, o#. Para 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 a 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 parámetro
pathque path-to-regexp entiende. Esto permite una flexibilidad mucho mayor en la definición de sus rutas, como patrones repetitivos, comodines, etc. Para definir un parámetro como opcional, añada un signo de interrogación al final (?).Así, para definir un parámetro opcional, se hace:
y para múltiples parámetros opcionales:
Nota: React Router v4 es incompatible con [tag:react-router-relay] (read more here). Utilice la versión v3 o anterior (se recomienda la v2) en su lugar.
Para los usuarios de React Router v4 que lleguen aquí después de una búsqueda, los parámetros opcionales en una
se denotan con un sufijo?`.Aquí está la documentación pertinente:
https://reacttraining.com/react-router/web/api/Route/path-string
https://www.npmjs.com/package/path-to-regexp#optional
Los parámetros pueden llevar como sufijo 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 a la que se puede acceder con o sin número de página.
Sintaxis de trabajo para múltiples parámetros opcionales:
Ahora, la url puede ser