Di situs web konvensional, browser meminta dokumen ke server web, mengunduh dan mengevaluasi aset CSS dan JavaScript, dan membuat HTML yang dikirim dari server. Ketika pengguna mengklik tautan, prosesnya diperbarui dari awal untuk halaman baru.
Routing klie n-side memungkinkan aplikasi untuk memperbarui URL dari tautan klik tanpa meminta dokumen lain dari server. Sebagai gantinya, aplikasi dapat segera membuat UI baru dan melakukan permintaan data dengan Fetch untuk memperbarui halaman dengan informasi baru.
Ini akan memungkinkan browser untuk membutuhkan dokumen yang sama sekali baru atau mengevaluasi kembali CSS dan aset JavaScript untuk halaman berikutnya, sehingga Anda dapat mengalami pengguna yang lebih cepat. Selain itu, Anda juga dapat mengalami pengalaman pengguna yang lebih dinamis seperti animasi.
Perutean sisi klien dimungkinkan dengan membuat router dan menautkan ke halaman menggunakan tautan dan . NET Framework:
impor * as Bereaksi dari "Bereaksi"; impor < Createroot > dari "React-dom/klien"; impor CreateBrowserRouter, Penyedia router, akar, link, > dari "React-router-dom"; Konkret router = CreateBrowserRouter([ Lulus "/", elemen: ( Div> h1& gt;h1> link to="Tentang"& Gt; tentang kamilink>Div> ), >, Lulus "Tentang", Elemen: DivTentang & gt;Div>, >, ]); Createroot(dokumen.GetElementById("akar")).Memberikan( Penyedia router router=router> /> ); Routing bersarang adalah ide umum yang mengikat segmen URL ke hierarki dan data komponen. Rute bersarang React Router terinspirasi oleh sistem perutean Ember. js sekitar 2014. Tim Ember memperhatikan bahwa segmen URL diputuskan dalam hampir setiap kasus:
React Router adalah API untuk membuat tata letak bersarang yang dikombinasikan dengan segmen dan data URL, dan menerima kebiasaan ini.
// Atur rute bersarang dengan JSX CreateBrowserRouter( Buat rute dari elemen( akar jalur="/" elemen=akar />>> akar jalur="kontak" elemen=kontak />> /> akar jalur="Dasbor" elemen=Dasbor />> Pemuat=(< meminta >) => mengambil("/api/dashboard. json", Kirim Sinyal:meminta.sinyal, >) > /> akar elemen=Authlayout />>> akar jalur="Login" elemen=Login />> Pemuat=Redirect ifuser> /> akar jalur="Keluar" tindakan=Pengguna Logout> />akar>akar> ) ); // atau gunakan objek biasa CreateBrowserRouter([ Lulus "/", Rute elemen />, Anak-anak: [ Lulus "kontak", Kontak elemen />, >, Lulus "Dasbor", Dasbor Elemen />, Pemuat: (< meminta >) => mengambil("/api/dashboard. json", Kirim Sinyal:meminta.sinyal, >), >, Tentukan elemen: authlayout />, Anak-anak: [ Lulus "Login", Login Elemen />, PemuatRedirect ifuser, >, Lulus "Keluar", TindakanPengguna Logout, >, ], >, ], >, ]); Visualisasi ini mungkin berguna.
Segmen URL adalah pemegang permainan dinamis yang dianalisis dan disediakan oleh berbagai API.
akar jalur="Proyek/: ProjectID/Tugas/: TaskId" /> Kedua segmen tersebut dinamis dan disediakan untuk API berikut:
// Saat lokasi saat ini adalah/proyek/ABC/tugas/3 akar // Kirim ke loader Pemuat=(< Parameter >) => Parameter.ID Proyek; // ABC Parameter.ID tugas; // 3 >> // dan tindakan tindakan=(< Parameter >) => Parameter.ID Proyek; // ABC Parameter.ID tugas; // 3 >> elemen=tugas />> />; fungsi tugas() // dikembalikan dari `useparams` Konkret Parameter = Usparams(); Parameter.ID Proyek; // ABC Parameter.ID tugas; // 3 > fungsi acak() Konkret Cocok = Pertandingan Pemuda( "/ Proyek/: ID Proyek/ Tugas/: ID Tugas" ); Cocok.Parameter.ID Proyek; // ABC Cocok.Parameter.ID tugas; // 3 > Ketika URL cocok dengan perutean, React Router memberi peringkat perutean sesuai dengan jumlah segmen, segmen statis, segmen dinamis, sprat, dll., Dan memilih kecocokan yang paling spesifik.
Misalnya, mari kita pertimbangkan dua rute berikut:
akar jalur="/Tim/: TeamId" /> akar jalur="/ Tim/ baru" /> Secara teknis, bahkan jika kedua rute cocok dengan URL (baru mungkin TeamID), Anda dapat melihat bahwa Anda secara intuitif memilih rute kedua (/tim/baru). Algoritma pencocokan React Router juga tahu itu.
Anda tidak perlu khawatir tentang urutan rute di rute peringkat.
Sebagian besar aplikasi web memiliki bagian atas UI, bilah samping, dan seringkali bagian navigasi permanen ke berbagai tingkatan. Dengan menata item navigasi aktif, Anda dapat mengetahui di mana pengguna berada di aplikasi (isactive) atau ke mana Anda akan pergi (ispenging).
Navilink gaya=(< Isaktif, Ispending >) => Nilai pengembalian warnaIsaktif ? "merah" : "Warisan", >; >> Nama kelas=(< Isaktif, Ispending >) => Nilai pengembalian Isaktif ? "aktif" : Ispending ? "Tahan" : ""; >> /> Cocok juga dapat digunakan untuk tampilan “aktif” selain tautan.
fungsi Somecomp() Konkret Cocok = Pertandingan Pemuda("/ pesan"); Nilai pengembalianli Nama kelas=Boul(Cocok) ? "aktif" : ""> />; > Anda dapat mengambil jalur relatif seperti HTML, dan Anda akan ditingkatkan pada rute bersarang.
Misalkan Anda memiliki konfigurasi rute berikut:
akar jalur="Rumah" elemen=Rumah />>> akar jalur="Proyek/: ID Proyek" elemen=proyek />>> akar jalur=": TaskId" elemen=tugas />> />akar>akar> Mari kita pertimbangkan url https://example. com/home/project/123 yang menjadikan hierarki komponen root berikut:
Rumah> proyek />Rumah> Rendering tautan di bawah ini akan menyelesaikan HREF tautan:
| di @/home/proyek/123 | Diselesaikan |
|---|---|
| / Home/ Project/ 123/ ABC | |
| / Rumah/ proyek/ 123 | |
| / Rumah | |
| / Rumah/ proyek |
Perhatikan bahwa pertama … untuk menghapus kedua Proyek/: Rute ProjectId. Secara default, tautan relatif bukan segmen URL, tetapi hierarki rute. Dalam contoh berikut, Anda dapat mengikuti segmen Pass sebagai gantinya dengan menambahkan relatif = “path”.
Tautan relatif selalu relatif terhadap rute rendering, tidak relatif terhadap seluruh URL. Dengan kata lain, bahkan jika pengguna membuat navigasi yang lebih dalam di URL/home/proyek/123/ABC, HREF tidak diubah (sebaliknya, sebaliknya, ini adalah masalah umum dengan router sisi klien).
Kami biasanya, segmen URL dipetakan ke data permanen aplikasi, jadi React Router menawarkan kait beban data konvensional yang mulai memuat data selama navigasi. Dengan menggabungkan dengan rute bersarang, Anda dapat membaca semua data dalam beberapa tata letak dalam URL tertentu secara paralel.
akar jalur="/" Pemuat=Asinkron (< meminta >) => // roda adalah fungsi asinkron Konkret res = Tunggu mengambil("/api/user. json", Kirim Sinyal:meminta.sinyal, >); Konkret pengguna = Tunggu res.json(); Nilai pengembalian pengguna; >> elemen=akar />> > akar jalur=": TeamID" // Lauder memahami respons mengambil dan secara otomatis UNLAP // res. json (), sehingga Anda dapat mengembalikan respons pengambilan. Pemuat=(< Parameter >) => Nilai pengembalian mengambil(`/API/tim/Parameter.ID Tim>`); >> elemen=tim />> > akar jalur=": GameID" Pemuat=(< Parameter >) => // Tentu saja, dapat digunakan di penyimpanan data apa pun. Nilai pengembalian SDK palsu.Memperoleh tim(Parameter.ID game); >> elemen=permainan />> />akar>akar> Data akan dapat menggunakan komponen melalui UseloaderData.
fungsi akar() Konkret pengguna = UseloaderData(); Data dari // > fungsi tim() Konkret tim = UseloaderData(); // data berikut > fungsi permainan() Konkret permainan = UseloaderData(); // data berikut > Ketika pengguna mengakses https://example. com/real-salt-lake/45Face3 atau mengklik tautan, ketiga rutloader dipanggil sebelum UI URL diterjemahkan, dan secara paralel.
Adalah umum untuk mengarahkan pengguna ke rute lain saat memuat atau mengubah data.
akar jalur="Dasbor" Pemuat=Asinkron () => Konkret pengguna = Tunggu palsu.Akuisisi Pengguna(); if (!pengguna) // Jika Anda tahu Anda tidak dapat membuat rute // Lemparkan pengalihan untuk menghentikan eksekusi kode di sini, // Kirim pengguna ke rute baru Lambat Redirect("/ Masuk"); > // Dalam kasus lain, lanjutkan Konkret statistik = Tunggu palsu.getdashboardstats(); Nilai pengembalian < pengguna, statistik >; >> /> akar jalur="Proyek/ Baru" tindakan=Asinkron (< meminta >) => Konkret data = Tunggu meminta.Data formulir(); Konkret Proyek baru = Tunggu Buat proyek(data); // Adalah umum untuk mengarahkan kembali setelah tindakan selesai, // Kirim pengguna ke catatan baru Nilai pengembalian Redirect(`/Proyek/Proyek baru.id>`); >> /> Saat pengguna menelusuri aplikasi, data untuk halaman berikutnya dimuat sebelum halaman dirender. Penting untuk memberikan masukan kepada pengguna pada saat ini agar aplikasi tidak terasa tidak responsif.
fungsi akar() Konkret navigasi = Penggunaan navigasi(); Nilai pengembalian ( Div> navigasi.situasi === "memuat" &&pemintal global />> bilah sisi palsu /> saluran keluar /> catatan kaki palsu />Div> ); > Kerangka UI menggunakan
Daripada menunggu halaman data berikutnya, Anda dapat menunda data sehingga UI segera beralih ke layar berikutnya dengan UI placeholder saat data dimuat.
akar jalur="masalah/:issueId" elemen=penugasan />> Pemuat=Asinkron (< Parameter >) => // Ini adalah janji temu, bukan janji temu. Konkret komentar = palsu.Dapatkan komentar(Parameter.isuId); Konkret sejarah = palsu.mendapatkan.(Parameter.isuId); // Namun, masalahnya *menunggu* Konkret penugasan = Tunggu palsu.Dapatkan masalah(Parameter.isuId); // Mengaktifkan ketegangan untuk janji temu yang tidak menunggu Nilai pengembalian penundaan(< penugasan, komentar, sejarah >); >> />; fungsi penugasan() Konkret < penugasan, sejarah, komentar > = UseloaderData(); Nilai pengembalian ( Div> Deskripsi tugas penugasan=penugasan> /> /* Suspense menyediakan pengganti pengganti */> ketegangan mundur=kerangka issueHistory />>> /* Menunggu mengelola data yang tertunda (janji) */> siaga menyelesaikan=sejarah>> /* Callback saat data teratasi */> (Sejarah resolusi) => ( Sejarah publikasi sejarah=Sejarah resolusi> /> )> siaga>ketegangan> ketegangan mundur=kerangka komentar />>> siaga menyelesaikan=komentar>> /* Anda juga dapat mengakses data menggunakan hook */> Komentar tugas />siaga>ketegangan>Div> ); > fungsi Komentar tugas() Konkret komentar = gunakanAsyncValue(); Nilai pengembalianDiv>/* . */>Div>; > Formulir HTML, seperti tautan, adalah peristiwa navigasi. React Router mendukung alur kerja formulir HTML dengan perutean sisi klien.
Saat formulir dikirimkan, peristiwa navigasi browser normal diblokir dan Permintaan dibuat dengan FormData yang dikirimkan di badan. Permintaan ini ada dalam formulir.
Dikirim untuk bertindak:
membentuk tindakan="/proyek/baru"> label> Judul proyek br /> masukan jenis="teks" nama="judul" />label> label> Tanggal akhir target br /> masukan jenis="tanggal" nama="tenggat waktu" />label>membentuk> akan dikirim ke tindakan (termasuk request. formData ) untuk rute yang cocok.
akar jalur="Proyek/ Baru" tindakan=Asinkron (< meminta >) => Konkret Data formulir = Tunggu meminta.Data formulir(); Konkret Proyek baru = Tunggu Buat proyek( judulData formulir.perolehan("judul"), Dengan tenggat waktuData formulir.perolehan("tenggat waktu"), >); Nilai pengembalian Redirect(`/Proyek/Proyek baru.id>`); >> /> Menurut kebiasaan Web beberapa dekade yang lalu, ketika formulir diposting di server, data diubah dan halaman baru diberikan. Kustom ini diikuti dalam API variabel data berbasis router react HTML.
Setelah aksi root dipanggil, loader semua data pada halaman dipanggil lagi, dan UI secara otomatis membuat data tetap terbaru. Tidak ada kedaluwarsa kunci tunai atau penyedia konteks.
Ketika formulir dikirim ke aksi root, Anda dapat mengakses status navigasi untuk menampilkan indikator video atau menonaktifkan set bidang.
fungsi NewProjectFform() Konkret navigasi = Penggunaan navigasi(); Konkret sibuk = navigasi.situasi === "Penyerahan"; Nilai pengembalian ( membentuk tindakan="/proyek/baru"> Set bidang tidak sah=sibuk>> label> Judul proyek br /> masukan jenis="teks" nama="judul" />label> label> Tanggal akhir target br /> masukan jenis="tanggal" nama="tenggat waktu" />label>Set bidang> tombol jenis="mengirim" tidak sah=sibuk>> sibuk ? "Membuat " : "Membuat"> tombol>membentuk> ); > Jika Anda tahu formdata yang dikirim ke aksi, Anda dapat melewatkan indikator sibuk dan segera membuat UI berikutnya, bahkan jika pemrosesan asinkron masih ditahan. Ini disebut “UI optimis”.
fungsi Like Button(< Menciak >) Konkret Fetcher = Fetcher digunakan(); // Jika Anda memiliki `formdata`, kirimkan ke aksinya. Konkret Manis = Fetcher.Data formulir ? // periksa data formulir Fetcher.Data formulir.perolehan("Manis") === "Ya" : // Jika tidak diposting dalam tindakan, gunakan nilai catatan Menciak.Manis; Nilai pengembalian ( Fetcher Form Metode="Posting" tindakan="Toggle"> tombol jenis="mengirim" nama="Manis" nilai=Manis ? "Ya" : "no"> />Fetcher Form> ); > (Ya, tombol HTML memiliki nama dan nilai).
Adalah umum untuk menggunakan fetcher untuk melakukan UI yang optimis, tetapi Anda dapat melakukan hal yang sama dengan bentuk normal menggunakan navigasi. FormData.
Formulir HTML adalah model mutasi, tetapi ada satu batas utama: transmisi formulir adalah navigasi, sehingga Anda hanya dapat memegang satu per satu.
Di sebagian besar aplikasi Web, seperti dalam daftar catatan, Anda dapat secara bersamaan menyebabkan banyak varian, seperti dihapus secara mandiri, menandai tanda penyelesaian, atau menyukai!
Dengan menggunakan fetcher, Anda dapat berinteraksi dengan aksi root dan loader tanpa menampilkan navigasi pada browser.
Bayangkan daftar tugas:
fungsi tugas() Konkret tugas = UseloaderData(); Nilai pengembalian tugas.peta((tugas) => ( Div> p>tugas.nama>p> Tombol Lengkap Toguru tugas=tugas> />Div> )); > Setiap tugas memiliki keadaan tertunda sendiri, tanpa menyebabkan navigasi dengan fetcher, dan tanda penyelesaian dapat ditandai secara independen dari tuga s-tugas lain:
fungsi Tombol Lengkap Toguru(< tugas >) Konkret Fetcher = Fetcher digunakan(); Nilai pengembalian ( Fetcher Form Metode="Posting" tindakan="/ Toguru lengkap"> Set bidang tidak sah=Fetcher.situasi !== "Idola">> masukan jenis="Tersembunyi" nama="id" nilai=tugas.id> /> masukan jenis="Tersembunyi" nama="status" nilai=tugas.penyelesaian ? "Tidak lengkap" : "penyelesaian"> /> tombol jenis="mengirim"> tugas.status === "penyelesaian" ? "Tandai belum selesai" : "Tandai penyelesaiannya"> tombol>Set bidang>Fetcher Form> ); > React Router membatalkan operasi lama dan secara otomatis melakukan data baru.
Setiap kali Anda memiliki UI asinkron, ada risiko kondisi balap. Akibatnya, itu menjadi antarmuka pengguna yang menampilkan keadaan yang salah.
Mari kita pertimbangkan bidang pencarian di mana daftar diperbarui saat pengguna dimasukkan:
Q = Ry | Q? = Kueri Ryan selesai. Jika tidak diproses dengan benar, hasilnya akan sementara nilai yang benar untuk q = ryan, tetapi kemudian hasil yang benar untuk q = ry akan dibalik. Throtal dan debut saja tidak cukup. Anda perlu pembatalan.
Jika Anda menggunakan Perjanjian Data React Router, Anda dapat secara otomatis menghindari masalah ini.
Q = Ry | React Router tidak hanya memproses kondisi balap navigasi seperti itu, tetapi juga banyak lainnya, seperti jalan hasil lengkap otomatis dan beberapa mutasi simultan dengan fetchers (dan validasi simultan otomatis mereka).
Sebagian besar kesalahan aplikasi secara otomatis diproses oleh React Router. Ini menangkap semua kesalahan yang dilemparkan selama rendering:
Faktanya, hampir semua kesalahan dalam aplikasi berlaku, kecuali untuk event handler () dan kesalahan yang dilemparkan ke dalam uefefect. Dalam aplikasi React Router, kesalahan seperti itu cenderung terjadi.
Ketika kesalahan dilemparkan, elemen kesalahan sedang rendering, tetapi kesalahan diterjemahkan.
akar jalur="/" Pemuat=() => sesuatu.itu.Lambat.an.kesalahan(); >> // ini tidak diterjemahkan elemen=Happy Pass />> Alih-alih // Elemen kesalahan=Batas kesalahan />> /> Jika rute tidak memiliki ErorElement, kesalahan akan menggelembung pada rute induk terdekat dengan erorelement:
akar jalur="/" elemen=Happy Pass />> Elemen kesalahan=Batas kesalahan />> > / * Kesalahan di sini adalah gelembung hingga rute induk */> akar jalur="Login" elemen=Login />> />akar> Bereaksi router meniru pengguliran browser selama navigasi dan menunggu data dimuat sebelum menggulir. Ini akan mengembalikan posisi gulir ke lokasi yang benar.
Anda juga dapat menyesuaikan operasi, seperti memulihkan lokasi (seperti nama jalur URL) atau mencegah pengguliran dari tautan tertentu (seperti tab di tengah halaman).
React Router dibangun dengan API standar web. Lauder dan tindakan dapat menerima objek permintaan API Web Fetch standar dan mengembalikan objek respons. Pembatalan dilakukan dalam sinyal abort, parameter pencarian diproses oleh URLSearchParams, dan mutasi data diproses dalam formulir HTML.
Jika Anda menguasai router bereaksi, Anda juga dapat menggunakan platform web.