javascript - example - React Router con parámetro de ruta opcional

react router switch

Question

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, no se encuentra la ruta sin el parámetro.

EDITAR # 1:

La solución mencionada here 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

Answer 1

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.0 usted 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 parámetro :paramName coincide con un segmento de URL hasta el siguiente / :paramName 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 parámetro de path-to-regexp 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 react-router-relay ( lea más aquí ). Utilice la versión v3 o anterior (se recomienda la v2).

Answer 2

Para cualquier usuario de React Router v4 que llegue aquí después de una búsqueda, los parámetros opcionales en un <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} />

Answer 3

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