Saya ingin mendeklarasikan path dengan parameter path opsional, maka ketika saya menambahkannya halaman untuk melakukan sesuatu yang ekstra (mis. Isi beberapa data):

http: // localhost / app / path / ke / halaman <= render halaman http: // localhost / app / path / ke / halaman / pathParam <= render halaman dengan beberapa data sesuai dengan pathParam

Di router reaksi saya, saya memiliki jalur berikut, untuk mendukung dua opsi (ini adalah contoh yang disederhanakan):

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

Pertanyaan saya adalah, bisakah kita mendeklarasikannya dalam satu rute? Jika saya menambahkan hanya baris kedua maka rute tanpa parameter tidak ditemukan.

EDIT # 1:

Solusi yang disebutkan di sini tentang sintaks berikut tidak bekerja untuk saya, apakah itu yang tepat? Apakah ada dalam dokumentasi?

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

Versi router reaksi saya adalah: 1.0.3

Hasil edit yang Anda posting valid untuk versi React-router (v0.13) yang lebih lama dan tidak berfungsi lagi.

Bereaksi Router v1, v2 dan v3

Karena versi 1.0.0Anda menentukan parameter opsional dengan:

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

dan untuk beberapa parameter opsional :

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

Anda menggunakan tanda kurung ( )untuk membungkus bagian rute opsional, termasuk garis miring ( /). Lihatlah halaman Panduan Pencocokan Rute dari dokumentasi resmi.

Catatan: The :paramNameparameter cocok dengan segmen URL sampai ke yang berikutnya /, ?atau #. Untuk informasi lebih lanjut tentang jalur dan params, baca lebih lanjut di sini .

Bereaksi Router v4 dan di atasnya

React Router v4 pada dasarnya berbeda dari v1-v3, dan parameter path opsional tidak didefinisikan secara eksplisit dalam dokumentasi resmi juga.

Sebagai gantinya, Anda diminta untuk mendefinisikan pathparameter yang dipahami oleh path-to-regexp . Ini memungkinkan fleksibilitas yang jauh lebih besar dalam mendefinisikan jalur Anda, seperti pola berulang, wildcard, dll. Jadi, untuk mendefinisikan parameter sebagai opsional, Anda menambahkan tanda tanya ( ?).

Dengan demikian, untuk menetapkan parameter opsional, Anda harus:

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

dan untuk beberapa parameter opsional :

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

Catatan: React Router v4 tidak kompatibel denganReaksi-router-relay( baca lebih lanjut di sini ). Gunakan versi v3 atau yang lebih lama (disarankan v2) sebagai gantinya.

Untuk setiap pengguna React Router v4 yang tiba di sini setelah pencarian, parameter opsional di dalam <Route>dilambangkan dengan ?akhiran.

Berikut dokumentasi yang relevan:

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

path: string

Setiap jalur URL yang valid yang dipahami oleh path-to-regexp .

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

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

Pilihan

Parameter dapat diakhiri dengan tanda tanya (?) Untuk menjadikan parameter opsional. Ini juga akan membuat awalan opsional.

Contoh sederhana dari bagian paginasi situs yang dapat diakses dengan atau tanpa nomor halaman.

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

Sintaks yang berfungsi untuk beberapa parar opsional:

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

Sekarang, url dapat:

1. /bagian
2. / section / page / 1
3. / section / page / 1 / sort / asc

untuk react-router V5 dan penggunaan di atas di bawah sintaks untuk beberapa jalur

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