React Router com parâmetro de caminho opcional

306

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

tbo
fonte

Respostas:

650

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 com( leia mais aqui ). Use a versão v3 ou anterior (v2 recomendada).

Chris
fonte
2
Esta ainda é uma pergunta sobre vários parâmetros opcionais no URL, como/route(/:category/(:article)
Alex Shwarc 31/07/17
1
@AlexShwarc, bom ponto, obrigado. Eu adicionei código para demonstrar vários parâmetros opcionais. Dar uma olhada.
Chris
1
@ Chris, tenho certeza, não funciona dessa maneira, você verificou isso?
21817 Alex Shwarc
@ Chris com a versão 3 #
Alex Shwarc 1/17/17
1
Posso criar parâmetros de caminho opcionais para a rota principal? Por exemplo, preciso adicionar parâmetros de idioma ao caminho, e o URL da minha página inicial será "/" e "/ pt" Aqui está a demonstração
Kholiavko
76

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} />
John
fonte
@ user2928231 Obrigado, atualizado com o novo URL de documentos. Tanto quanto posso dizer, <Match pattern />agora é <Route path />novamente, mas o sufixo do ponto de interrogação continua sendo a abordagem agora para lidar com parâmetros opcionais.
John John
2
Oi! Eu ainda tenho um problema com o parâmetro opcional e não pode fazer próximas rotas de trabalho: Eu tenho players, players/123, players/123/edit, players?unseen=true. O parâmetro opcional ?unseennão funciona para mim. embora eu tenha tentado todas as correções desta discussão. Você poderia, por favor, ajudar com a string de caminho apropriada, que resolverá isso? Desde já, obrigado!
Khrystyna Skvarok
Oi @KhrystynaSkvarok, você já descobriu como obter seu caminho com uma string de consulta opcional funcionando? Eu estou tentando fazer o mesmo
sabliao
2
@sabliao Hi! Eu não tenho um exemplo de trabalho, mas para URL, como example.com/search?query=testtentar usar o próximo padrão /:search(search).
Khrystyna Skvarok
Como posso obter parâmetros de URL após delimitador?
PHP Ninja
15

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
Nebojsa Sapic
fonte
1

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

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