Bereaksi: perbedaan antara <Rute jalur persis = "/" /> dan <Rute jalur = "/" />

163

Adakah yang bisa menjelaskan perbedaannya?

<Route exact path="/" component={Home} />

dan

<Route path="/" component={Home} />

Saya tidak tahu arti 'tepat'

reactjs react-router react-router-dom batal
sumber
1
Jawabannya bagus sekali. Namun orang mungkin mendapatkan keraguan seperti "Mengapa kita tidak dapat memiliki <code> tepat </code> untuk semua rute itu?" Bayangkan URL yang kira-kira seperti ini. <code> yourreactwebsite.com/getUsers/userId= ? </code> Ini adalah contoh di mana ID pengguna akan dimasukkan secara dinamis di URL dan jadi kami tidak bisa menggunakan prop <code> tepat </code> di Router Anda di sini.
VIJAYKUMAR REDDY ALAVALA

Jawaban:

265

Dalam contoh ini, tidak ada yang benar-benar terjadi. The exactparam datang ke dalam bermain ketika Anda memiliki beberapa jalur yang memiliki nama yang mirip:

Misalnya, bayangkan kami memiliki Userskomponen yang menampilkan daftar pengguna. Kami juga memiliki CreateUserkomponen yang digunakan untuk membuat pengguna. Url untuk CreateUsersharus bersarang di bawah Users. Jadi pengaturan kami dapat terlihat seperti ini:

<Switch>
  <Route path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

Sekarang masalahnya di sini, ketika kita pergi ke http://app.com/usersrouter akan melalui semua rute yang kita tentukan dan mengembalikan kecocokan PERTAMA yang ditemukannya. Jadi dalam hal ini, ia akan menemukan Usersrute terlebih dahulu dan kemudian mengembalikannya. Semuanya bagus.

Tetapi, jika kita pergi ke http://app.com/users/create, itu akan kembali melalui semua rute yang kita tentukan dan mengembalikan kecocokan PERTAMA yang ditemukannya. Bereaksi router melakukan pencocokan sebagian, sehingga /userssebagian cocok /users/create, sehingga akan mengembalikan Usersrute yang salah!

The exactparam menonaktifkan pencocokan parsial untuk rute dan memastikan bahwa itu hanya mengembalikan rute jika jalan adalah pertandingan EXACT ke url saat ini.

Jadi dalam hal ini, kita harus menambahkan rute exactkita Userssehingga hanya akan cocok dengan /users:

<Switch>
  <Route exact path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

Dokumen menjelaskan exactsecara rinci dan memberikan contoh lain.

Chase DeAnda
sumber
11
"Tapi, jika kita pergi ke app.com/users/create , itu akan kembali melalui semua rute yang ditentukan dan mengembalikan kecocokan PERTAMA yang ditemukannya." - pada kenyataannya itu akan mengembalikan semua Rute yang ditemukan kecocokan (penuh atau sebagian). Perilaku yang dijelaskan oleh @Chase DeAnda hanya akan terjadi jika <Route> dilingkupi oleh tag <Switch>.
watsabitz
4
exactharus menjadi standar dalam pendapat saya
Alexander Derck
Bagaimana jika kita memiliki setiap definisi rute di komponen yang berbeda, maksud saya /admin//usersdi komponen Admin, dan /admin/users/createdi komponen Root ??? Saat ini saya mengalami situasi ini dan exactsolusi tipikal tidak bekerja dengan baik.
Yulio Aleman Jimenez
Saya pikir perilaku ini hanya berfungsi jika kedua rute berada pada level yang sama dengan induk Switch (atau komponen)
Yulio Aleman Jimenez
1
@ChaseDeAnda yang saya butuhkan adalah kebalikannya. Mungkin saya harus menulis jawaban baru pada SO untuk memperjelas situasi saya dan mendapatkan jawaban yang benar.
Yulio Aleman Jimenez
7

Singkatnya, jika Anda memiliki beberapa rute yang ditentukan untuk perutean aplikasi Anda, ditutup dengan Switchkomponen seperti ini;

<Switch>

  <Route exact path="/" component={Home} />
  <Route path="/detail" component={Detail} />

  <Route exact path="/functions" component={Functions} />
  <Route path="/functions/:functionName" component={FunctionDetails} />

</Switch>

Maka Anda harus memasukkan exactkata kunci ke Rute yang jalurnya juga disertakan oleh jalur Rute lain. Misalnya jalur home /disertakan dalam semua jalur sehingga perlu memiliki exactkata kunci untuk membedakannya dari jalur lain yang dimulai dengan /. Alasannya juga mirip dengan /functionsjalan. Jika Anda ingin menggunakan jalur rute lain seperti /functions-detailatau /functions/open-dooryang termasuk /functionsdi dalamnya maka Anda perlu menggunakan exactuntuk /functionsrute tersebut.

milkersarac
sumber
-1

Jawaban terpendek adalah

Silakan coba ini. 

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>
Jamal Sheikh Ali
sumber
1
Ini pada dasarnya tidak menjelaskan makna exactatribut / prop, dan dengan demikian jelas bukan "jawaban". Anda harus mencoba menjawab pertanyaan yang sebenarnya ditanyakan daripada memberikan solusi untuk masalah yang Anda tidak yakin dengan OP sebenarnya.
Victor Zamanian