Perbedaan antara perutean front-end reaksi dan perutean back-end: 1. Perutean front-end dipicu melalui tag Link di "react-router", dan perutean back-end dipicu melalui ajax; berdasarkan pemantauan peristiwa browser, sedangkan perutean back-end didasarkan pada protokol Komunikasi http; 3. Perutean ujung depan dapat mencapai rendering sebagian, sedangkan perutean ujung belakang dapat merender ulang seluruh halaman.
Lingkungan operasi tutorial ini: Sistem Windows 10, reaksi versi 17.0.1, komputer Dell G3.
Mekanisme perutean backend
Siswa yang mengetahui backend mengetahui bahwa perutean backend berarti bahwa backend mendaftarkan fungsi perutean backend di app.js, dan frontend memicu fungsi panggilan balik perutean yang sesuai melalui ajax (ambil contoh express)
Pemicu: ajax
Respons: app.get('/router',callback)
Prinsip: Berdasarkan protokol komunikasi http
//app.jsapp.get('/', (permintaan, tanggapan) => { let ret = { "sukses": benar, "kode": 200, "pesan": "", "data": [], } respon.kirim(ret)})Mekanisme perutean front-end
Sedangkan untuk perutean front-end (mengacu pada router reaksi), front-end mendaftarkan perutean front-end dan pemetaan komponen di router.js, dan front-end menyebabkan rendering komponen melalui rute yang ditetapkan oleh Link atau dengan memasukkan rute yang sesuai di browser:
Pemicu: Tag tautan di router reaksi
Respon: Render komponen yang sesuai di tag Rout
Prinsip: Berdasarkan hash di browser (sebelum React-Router v2), history (React-Router v4)
//index.jsclass ListContent extends Komponen { konstruktor(alat peraga){ super(alat peraga); this.state = { } } render() { return ( <Baris> <Tombol>+ <Tautan ke="/topik"> Posting topik </Link> </Tombol> </Row> ); }}//router.js<Router> <div> <Header/> <Switch> <Jalur tepat rute="/" komponen={index} /> < Rute tepat path="/topic" komponen={topic} /> </Switch> </div></Router>Di router.js, komponen header akan selalu ada di halaman, sedangkan komponen di tag Switch hanya akan dirender setelah dipicu.
Oleh karena itu, rendering lokal terbentuk
//Jika perutean front-end '/topic' terpicu, komponen indeks tidak akan merender <Router> <div> <Header/> <Switch> <Route exact path="/" komponen={null} /> < Rute tepat path=" /topic" komponen={topic} /> </Switch> </div></Router>Perbedaan antara perutean front-end dan perutean back-end
Perutean front-end didasarkan pada pemantauan peristiwa browser dan tidak melewati protokol komunikasi http
Perutean front-end merender sebagian, dan back-end merender ulang seluruh halaman. Secara relatif, pengalaman perutean front-end lebih baik.