Quero declarar um caminho com um parâmetro de caminho opcional; portanto, quando adiciono a página, faça algo extra (por exemplo, preencha alguns dados):

http: // localhost / app / path / to / page <= renderiza a página http: // localhost / app / path / to / page / pathParam <= renderiza a página com alguns dados de acordo com o pathParam

No meu roteador de reação, tenho os seguintes caminhos, para oferecer suporte às duas opções (este é um exemplo simplificado):

<Router history={history}>    
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

Minha pergunta é: podemos declarar em uma rota? Se eu adicionar apenas a segunda linha, a rota sem o parâmetro não será encontrada.

EDIT # 1:

A solução mencionada aqui sobre a seguinte sintaxe não funcionou para mim, é uma solução adequada? Existe na documentação?

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

Minha versão do react-router é: 1.0.3

A edição que você postou era válida para uma versão mais antiga do React-router (v0.13) e não funciona mais.

Reagir o roteador v1, v2 e v3

Desde a versão, 1.0.0você define parâmetros opcionais com:

<Route path="to/page(/:pathParam)" component={MyPage} />

e para vários parâmetros opcionais :

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

Você usa parênteses ( )para quebrar as partes opcionais da rota, incluindo a barra ( /). Confira a página do Guia de correspondência de rota da documentação oficial.

Nota: O :paramNameparâmetro corresponde a um segmento de URL para o próximo /, ?ou #. Para saber mais sobre caminhos e parâmetros especificamente, leia mais aqui .

Reagir o roteador v4 e superior

O React Router v4 é fundamentalmente diferente da v1-v3, e os parâmetros de caminho opcionais também não estão definidos explicitamente na documentação oficial .

Em vez disso, você é instruído a definir um pathparâmetro que o caminho para o regexp entende. Isso permite uma flexibilidade muito maior na definição de seus caminhos, como padrões repetidos, curingas, etc. Portanto, para definir um parâmetro como opcional, você adiciona um ponto de interrogação à direita ( ?).

Como tal, para definir um parâmetro opcional, você deve:

<Route path="/to/page/:pathParam?" component={MyPage} />

e para vários parâmetros opcionais :

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

Nota: O React Router v4 é incompatível comreagir-roteador-relé( leia mais aqui ). Use a versão v3 ou anterior (v2 recomendada).

Para qualquer usuário do React Router v4 que chega aqui após uma pesquisa, os parâmetros opcionais em a <Route>são indicados com um ?sufixo.

Aqui está a documentação relevante:

https://reacttraining.com/react-router/web/api/Route/path-string

caminho: string

Qualquer caminho de URL válido que o caminho para a regexp entenda.

<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regexp#optional

Opcional

Os parâmetros podem ser sufixados com um ponto de interrogação (?) Para tornar o parâmetro opcional. Isso também tornará o prefixo opcional.

Exemplo simples de uma seção paginada de um site que pode ser acessada com ou sem um número de página.

<Route path="/section/:page?" component={Section} />

Sintaxe de trabalho para vários parâmetros opcionais:

<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />

Agora, o URL pode ser:

1. /seção
2. / seção / página / 1
3. / section / page / 1 / sort / asc

para o roteador de reação V5 e superior, use a sintaxe abaixo para vários caminhos

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