React Router con parámetro de ruta opcional
Quiero declarar una ruta con un parámetro de ruta opcional, por lo tanto, cuando la agrego, la página debe hacer algo adicional (por ejemplo, completar 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 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} />
La versión de mi enrutador de reacción es: 1.0.3
La edición que publicó fue válida para una versión anterior de React-router (v0.13) y ya no funciona.
Reaccionar enrutador v1, v2 y v3
Desde la versión 1.0.0defines 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} />
Utilice paréntesis ( )para envolver las partes opcionales de la ruta, incluida la barra diagonal inicial ( /). 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 de URL hasta el siguiente /, ?o #. Para obtener más información sobre rutas y parámetros específicamente, lea más aquí .
Reaccionar enrutador 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 la ruta a la expresión regular comprenda. Esto permite una flexibilidad mucho mayor a la hora de definir sus rutas, como patrones repetidos, comodines, etc. Por lo tanto, para definir un parámetro como opcional, debe agregar un signo de interrogación al final ( ?).
Como tal, para definir un parámetro opcional, haga lo siguiente:
<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 conreaccionar-enrutador-relé( leer más aquí ). Utilice la versión v3 o anterior (se recomienda la v2).
Para cualquier usuario de React Router v4 que llegue aquí después de una búsqueda, los parámetros opcionales en a <Route>se indican 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 comprenda la ruta a la expresión regular .
<Route path="/users/:id" component={User}/>
https://www.npmjs.com/package/path-to-regexp#optional
Opcional
Los parámetros pueden tener 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 un número de página.
<Route path="/section/:page?" component={Section} />
