Bereaksi Router dengan parameter jalur opsional


306

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

Jawaban:


650

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 dengan( baca lebih lanjut di sini ). Gunakan versi v3 atau yang lebih lama (disarankan v2) sebagai gantinya.


2
Ini masih menjadi pertanyaan tentang beberapa /route(/:category/(:article)
parar

1
@AlexShwarc, poin bagus, terima kasih. Saya menambahkan kode untuk menunjukkan beberapa parameter opsional. Silahkan lihat.
Chris

1
@ Chris saya yakin, tidak berfungsi seperti ini, sudahkah Anda memeriksanya?
Alex Shwarc

@ Chris dengan 3 versi
Alex Shwarc

1
Bisakah saya membuat param path opsional ke rute utama? Misalnya saya perlu menambahkan param bahasa ke jalur, dan url beranda saya akan "/" dan "/ en" Ini demo
Kholiavko

76

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} />

@ user2928231 Terima kasih, diperbarui dengan url dokumen baru mereka. Sejauh yang saya tahu <Match pattern />sekarang <Route path />lagi, tetapi akhiran tanda tanya tetap pendekatan sekarang untuk menangani params opsional.
John

2
Hai! Saya masih memiliki masalah dengan parameter opsional dan tidak dapat membuat rute berikutnya bekerja: saya punya players, players/123, players/123/edit, players?unseen=true. Parameter opsional ?unseentidak berfungsi untuk saya. meskipun saya mencoba semua perbaikan dari diskusi ini. Bisakah Anda membantu dengan string jalur yang tepat, yang akan menangani ini? Terima kasih sebelumnya!
Khrystyna Skvarok

Hai @KhrystynaSkvarok, apakah Anda pernah menemukan cara untuk mendapatkan jalur Anda dengan string kueri opsional yang berfungsi? Saya mencoba melakukan hal yang sama
sabliao

2
@sabliao Hai! Saya tidak memiliki contoh yang berfungsi, tetapi untuk URL suka example.com/search?query=testmencoba menggunakan pola berikutnya /:search(search).
Khrystyna Skvarok

Bagaimana saya bisa mendapat params dari url setelah pembatas?
PHP Ninja

15

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

1

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

<Route
          exact
          path={[path1, path2]}
          component={component}
        />
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.