Ben isteğe bağlı bir yol parametresi ile bir yol bildirmek istiyorum, bu nedenle ben ekstra bir şey yapmak için sayfa eklediğinizde (örneğin bazı verileri doldurun):

http: // localhost / app / path / to / page <= sayfayı oluştur http: // localhost / app / path / to / page / pathParam <= pathParam'a göre bazı veriler içeren sayfayı oluşturma

Reaksiyon yönlendiricimde, iki seçeneği desteklemek için aşağıdaki yollara sahibim (bu basitleştirilmiş bir örnektir):

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

Sorum şu, bunu bir rotada ilan edebilir miyiz ? Yalnızca ikinci satırı eklersem, parametresiz rota bulunamaz.

DÜZENLEME # 1:

Aşağıdaki sözdizimi ile ilgili olarak burada bahsedilen çözüm benim için işe yaramadı, uygun bir çözüm mü? Belgelerde var mı?

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

Reaksiyon yönlendirici sürümüm: 1.0.3

Gönderdiğiniz düzenleme React-router'ın (v0.13) eski bir sürümü için geçerliydi ve artık çalışmıyor.

React Router v1, v2 ve v3

Sürümden beri 1.0.0isteğe bağlı parametreleri şu şekilde tanımlarsınız:

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

ve birden fazla isteğe bağlı parametre için:

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

Baştaki eğik çizgi ( ) dahil olmak üzere , ( )rotanın isteğe bağlı bölümlerini sarmak için parantez kullanırsınız . Resmi belgelerin Güzergah Eşleştirme Rehberi sayfasına göz atın ./

Not: Parametre sonraki bir URL segment maçları , veya . Özellikle yollar ve parametreler hakkında daha fazla bilgi için burayı okuyun .:paramName/?#

React Router v4 ve üstü

React Router v4 temel olarak v1-v3'ten farklıdır ve isteğe bağlı yol parametreleri de resmi belgelerde açıkça tanımlanmamıştır .

Bunun yerine, regexp yolunun anlayacağı bir pathparametre tanımlamanız istenir . Bu, yinelenen desenler, joker karakterler, vb. Gibi yollarınızı tanımlamada çok daha fazla esneklik sağlar. Bu nedenle, bir parametreyi isteğe bağlı olarak tanımlamak için bir iz soru işareti ( ?) eklersiniz .

Bu nedenle, isteğe bağlı bir parametre tanımlamak için şunları yaparsınız:

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

ve birden fazla isteğe bağlı parametre için:

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

Not: Tepki Yönlendirici v4'tür uyumsuz iletepki-yönlendirici-röle( daha fazla bilgiyi buradan okuyabilirsiniz ). Bunun yerine v3 veya önceki bir sürümünü kullanın (v2 önerilir).

Bir aramayı takiben buraya gelen tüm React Router v4 kullanıcıları için <Route>, a'daki isteğe bağlı parametreler bir sonekle gösterilir ?.

İlgili belgeler:

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

yol: dize

Regexp yolunun anladığı geçerli herhangi bir URL yolu .

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

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

İsteğe bağlı

Parametreyi isteğe bağlı yapmak için parametreler bir soru işareti (?) İle eklenebilir. Bu da öneki isteğe bağlı yapar.

Bir sitenin sayfa numarasıyla veya sayfa numarası olmadan erişilebilen sayfalandırılmış bir bölümüne basit bir örnek.

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

Birden fazla isteğe bağlı parametre için çalışma sözdizimi:

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

Şimdi, url olabilir:

1. /Bölüm
2. / Bölüm / sayfa / 1
3. / Bölüm / sayfa / 1 / sıralama / asc

tepki yönlendirici V5 ve üstü için birden çok yol için sözdiziminin altında kullanın

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