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
La edición que has publicado era válida para una versión anterior de React-router (v0.13) y ya no funciona.
Desde la versión 1.0.0
se definen 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} />
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 :paramName
coincide 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 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 path
que 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:
<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 [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 <Ruta>se denotan con un sufijo
?`.
Aquí está la documentación pertinente:
https://reacttraining.com/react-router/web/api/Route/path-string
ruta: cadena
Cualquier ruta de URL válida que entienda path-to-regexp.
https://www.npmjs.com/package/path-to-regexp#optional
Opcional
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.
<Route path="/section/:page?" component={Section} />
Sintaxis de trabajo para múltiples parámetros opcionales:
<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />
Ahora, la url puede ser