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

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 conreact-router-relay( lea 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 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} />

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

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

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