Beberapa nama jalur untuk komponen yang sama di React Router

113

Saya menggunakan komponen yang sama untuk tiga rute berbeda:

<Router>
    <Route path="/home" component={Home} />
    <Route path="/users" component={Home} />
    <Route path="/widgets" component={Home} />
</Router>

Apakah ada cara untuk menggabungkannya, menjadi seperti:

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>
javascript reactjs path react-router url-routing Chetan Garg
sumber
2
Pada react-router 4.4.0, Anda sekarang dapat menentukan larik jalur dengan cara yang sangat mirip dengan saran Anda. Lihat jawaban saya di sini .
Ben Smith

Jawaban:

138

Mulai react-router v4.4.0-beta.4 , dan secara resmi di v5.0.0, Anda sekarang dapat menentukan larik jalur yang menyelesaikan komponen misalnya

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

Setiap jalur dalam larik adalah string ekspresi reguler.

Dokumentasi untuk pendekatan ini dapat ditemukan di sini .

Ben Smith
sumber
5
Saya yakin ini adalah jawaban terbaik. Jawaban @Cameron tidak mendukung fitur regexp penuh (setidaknya saya tidak dapat melakukannya).
Christopher Regner
2
Bagaimana cara mengatur exactatribut untuk satu jalur?
JulianSoto
1
@JulianSoto Membuat Rute ke komponen dengan satu jalur bersama dengan jalur yang tepat. Anda kemudian dapat membuat Route lain ke komponen yang sama dengan larik jalur tanpa atribut yang tepat.
Ben Smith
Saya tidak bisa yarn upgradedari 4.3 hingga 4.4. Apakah ini resmi dirilis?
ndtreviv
@ndtreviv Melihat log perubahan router react, saya dapat melihat fitur ini diluncurkan di v4.4.0 Beta 4. Saya sarankan untuk meningkatkan ke versi terbaru, yang pada saat penulisan ini adalah v5.5.0. Anda dapat melakukan ini dengan menjalankan "thread upgrade react-router --latest"
Ben Smith
115

Setidaknya dengan react-router v4 pathbisa menjadi string ekspresi reguler, jadi Anda bisa melakukan sesuatu seperti ini:

<Router>
    <Route path="/(home|users|widgets)/" component={Home} />
</Router>

Seperti yang Anda lihat, ini agak bertele-tele jadi jika component/ Anda routesederhana seperti ini mungkin tidak sepadan.

Dan tentu saja jika ini benar-benar sering muncul, Anda selalu dapat membuat komponen pembungkus yang menggunakan pathsparameter array , yang melakukan regex atau .maplogika yang dapat digunakan kembali.

Cameron
sumber
5
Ide bagus @Cameron. Saya merasa berguna untuk memodifikasinya sedikit agar hanya cocok dengan jalur yang dimulai dengan salah satu grup: /^\/(home|users|widgets)/ Sekarang, /widgetsakan cocok, tetapi /dashboard/widgetstidak akan cocok.
Towler
4
Seharusnya bagus, tapi untuk saat ini regex tipe tidak valid pada validasi tipe prop: Warning: Failed prop type: Invalid prop jalur` tipe regexpdisediakan ke Route, diharapkan string.`
Fábio Paiva
@ FábioPaiva ya saya masih belum menemukan cara memasang regex sewenang-wenang di rute
Atav32
1
masukkan sebagai string<Route path="/(new|edit)/user/:id?" ... />
medv
2
tidak bekerja denganpath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}
Murtaza Hussain
43

Saya rasa tidak demikian jika Anda menggunakan versi React Router yang lebih rendah dari v4.

Anda dapat menggunakan a mapseperti yang akan Anda lakukan dengan komponen JSX lainnya:

<Router>
    {["/home", "/users", "/widgets"].map((path, index) => 
        <Route path={path} component={Home} key={index} />
    )}
</Router>

EDIT

Anda juga dapat menggunakan regex untuk jalur di react-router v4 selama itu didukung oleh path-to-regexp . Lihat jawaban @ Cameron untuk info lebih lanjut.

Christopher Chiche
sumber
3
Jangan lupakan keyprop.
Neurotransmitter
9
perhatikan ini akan menyebabkan (tidak diinginkan ...?) pengulangan saat beralih dari jalur (mis. / home => / pengguna dalam contoh itu)
Hertzel Guinness
Memang! Keinginannya mungkin tergantung pada kasus penggunaan dan komponen Anda. Jika Anda tidak ingin memasang ulang, menggunakan regexp seperti yang ditunjukkan dalam pengeditan saya mungkin bekerja lebih baik.
Christopher Chiche
6

Pada react-route-dom v5.1.2 Anda dapat melewati beberapa jalur seperti di bawah ini

 <Route path={"/home" | "/users" | "/widgets"} component={Home} />

Dan jelas Anda perlu mengimpor file jsx Home di atas.

Abhishek
sumber
4

Pilihan lain: gunakan awalan rute. /pagessebagai contoh. Kamu akan mendapatkan

  • /pages/home
  • /pages/users
  • /pages/widgets

Dan kemudian selesaikan dengan cara mendetail di dalam Homekomponen.

<Router>
  <Route path="/pages/" component={Home} />
</Router>
arturtr.dll
sumber
0

Sesuai dengan dokumentasi React Router, proptype 'path' adalah bertipe string. Jadi tidak mungkin Anda melewatkan array sebagai props ke Route Component.

Jika niat Anda hanya mengubah rute, Anda dapat menggunakan komponen yang sama untuk rute berbeda tanpa masalah

Vijaykrish93
sumber
1
Jawaban ini tidak lagi benar karena path sekarang menerima larik string. Lihat jawaban ini .
Ben Smith
-1

Pada react-router v4.4 Anda bisa melakukan sesuatu seperti ini di bawah ini.

simpan path dalam variabel dan turunkan di bawah dan gunakan '|' Operator.

let home = "/home" ;
let users = "/users”;
let widgets = "/widgets" ;

<Route path={ {home} | {users} | {widgets} }  component={Home} />

jadi untuk semua jalur itu cocok itu akan membuat component={Home}yang Anda butuhkan ..

Nischith
sumber