Cara Membuat Remah Roti di React.js

Pernahkah Anda memperhatikan potongan teks kecil di beberapa situs web yang menandakan lokasi Anda saat ini di dalam situs? Itu disebut remah roti, dan itu bisa menjadi cara yang berguna untuk mengarahkan pengguna, terutama saat bernavigasi melalui situs web yang rumit. Artikel ini akan menunjukkan cara membuat remah roti di React.js.

Apa itu Breadcrumbs dan Apa Pentingnya?

Remah roti biasanya adalah potongan teks kecil yang menunjukkan lokasi saat ini di dalam situs web. Mereka dapat membantu mengarahkan pengguna, terutama saat menavigasi melalui situs web yang memiliki beberapa halaman. Dengan menyediakan jejak tautan, remah roti dapat membantu pengguna memahami di mana mereka berada di dalam situs web dan memungkinkan mereka menavigasi kembali ke bagian sebelumnya dengan mudah.

Penting untuk dicatat bahwa remah roti tidak boleh digunakan sebagai alat navigasi utama di situs web. Sebaliknya, mereka harus digunakan selain elemen navigasi lainnya seperti menu atau bilah pencarian.

Cara Membuat Remah Roti di React.js

Ada dua cara utama untuk membuat remah roti di React.js: dengan menggunakan react-router-dom perpustakaan atau dengan menggunakan gunakan-reaksi-router-breadcrumbs perpustakaan. Tetapi sebelum memulai, Anda harus melakukannya membuat aplikasi Bereaksi.

Metode 1: Dengan Menggunakan Perpustakaan react-router-dom

Dengan pustaka react-router-dom, Anda dapat membuat remah roti secara manual untuk setiap jalur dalam aplikasi React Anda. Perpustakaan menyediakan a komponen yang dapat digunakan untuk membuat remah roti.

Untuk menggunakan pustaka react-router-dom, pertama-tama Anda harus menginstalnya menggunakan npm:

npm Install react-router-dom

Setelah pustaka diinstal, Anda dapat mengimpornya ke dalam komponen React Anda:

impor { Tautan } dari 'bereaksi-router-dom'

Anda kemudian dapat menggunakan komponen untuk membuat remah roti:

<Tautan ke="/">Rumah</Link>
<Tautan ke="/products">Produk</Link>
<Tautan ke="/products/1">Produk 1</Link>

Sekarang, Anda dapat menambahkan beberapa gaya ke remah roti dan menyorot halaman saat ini yang sedang Anda buka. Untuk itu, Anda dapat menggunakan nama kelas penyangga dari komponen. Untuk mendapatkan pathname saat ini, Anda dapat menggunakan lokasi objek dari pustaka react-router-dom:

impor { Tautan, gunakan Lokasi } dari 'bereaksi-router-dom'
fungsiTepung roti() {
const lokasi = gunakanLokasi();
kembali (
<nav>
<Tautan ke="/"
 className={lokasi.namapath "/"? "remah roti aktif": "remah roti-tidak-aktif"}
>
 Rumah
</Link>
<Tautan ke="/products"
 className={location.pathname.startsWith("/products")? "remah roti aktif": "remah roti-tidak-aktif"}
>
 Produk
</Link>
<Tautan ke="/products/1"
 className={lokasi.namapath "/products/1"? "remah roti aktif": "remah roti-tidak-aktif"}
>
 Produk 1
</Link>
</nav>
 );
}
eksporbawaan Tepung roti;

Sekarang, buat file CSS baru dan beri nama remah roti.css. Tambahkan aturan CSS berikut ke file:

.breadcrumb-tidak-aktif {
 warna: #cccccc;
}
.breadcrumb-aktif {
 warna: #000000;
}
.breadcrumb-panah {
 margin-kiri: 10px;
 margin-kanan: 10px;
}

Sekarang, impor file CSS Anda ke dalam komponen React Anda dan tambahkan remah roti-panah kelas untuk Anda komponen:

impor { Tautan, gunakan Lokasi } dari 'bereaksi-router-dom'
impor "./breadcrumbs.css";
fungsiTepung roti() {
const lokasi = gunakanLokasi();
kembali (
<nav>
<Tautan ke="/"
 className={lokasi.namapath "/"? "remah roti aktif": "remah roti-tidak-aktif"}
>
 Rumah
</Link>
<rentang className="remah roti-panah">&gt;</span>
<Tautan ke="/products"
 className={location.pathname.startsWith("/products")? "remah roti aktif": "remah roti-tidak-aktif"}
>
 Produk
</Link>
<rentang className="remah roti-panah">&gt;</span>
<Tautan ke="/products/1"
 className={lokasi.namapath "/products/1"? "remah roti aktif": "remah roti-tidak-aktif"}
>
 Produk 1
</Link>
</nav>
 );
}
eksporbawaan Tepung roti;

Ada berbagai jenis kait di Bereaksi. Pustaka react-router-dom useLocation hook memberi Anda akses ke objek lokasi, yang memiliki informasi tentang jalur URL saat ini.

Itu prop className komponen menambahkan kelas CSS ke remah roti. Prop className mengambil string atau array string. Jika berupa string, string tersebut akan ditambahkan sebagai kelas tunggal ke elemen. Jika ini adalah larik string, setiap string dalam larik akan ditambahkan sebagai kelas terpisah.

Itu dimulai dengan metode memeriksa apakah pathname saat ini dimulai dengan "/ produk". Hal ini karena runut tautan untuk halaman produk harus aktif tidak hanya jika jalurnya adalah "/produk" tetapi juga saat jalurnya adalah "/produk/1", "/produk/2", dll.

Metode 2: Dengan Menggunakan Perpustakaan use-react-router-breadcrumbs

Cara lain untuk membuat remah roti di React adalah dengan menggunakan pustaka use-react-router-breadcrumbs. Pustaka ini secara otomatis menghasilkan remah roti berdasarkan rute yang ditentukan dalam aplikasi React Anda.

Untuk menggunakan library ini, pertama-tama Anda harus menginstalnya menggunakan npm:

npm Installmenggunakan-react-router-breadcrumbs

Setelah pustaka diinstal, Anda dapat mengimpornya ke dalam komponen React Anda:

impor gunakan Breadcrumb dari 'gunakan-reaksi-router-breadcrumb'

Anda kemudian dapat menggunakan gunakan Breadcrumb kait untuk membuat remah roti:

const remah roti = gunakan remah roti();
menghibur.log (remah roti);

Ini akan mencatat array objek remah roti ke konsol. Setiap objek remah roti berisi informasi tentang rute, seperti nama, jalur, dan parameter.

Sekarang, Anda dapat merender remah roti ke layar. Anda dapat menggunakan komponen dari perpustakaan react-router untuk membuat remah roti Anda:

impor { Tautan } dari 'bereaksi-router-dom'
impor gunakan Breadcrumb dari 'gunakan-reaksi-router-breadcrumb'
const rute = [
 { jalur: '/users/:userId', remah roti: 'Contoh 1' },
 { jalur: '/data', remah roti: 'Contoh 2' }
];
fungsiTepung roti() {
const remah roti = gunakan remah roti (rute);
menghibur.log (remah roti)
kembali (
<nav>
 {breadcrumbs.map(({ cocok, remah roti }) => (
<Kunci tautan={match.url} ke={match.url}>
 {remah roti} /
</Link>
 ))}
</nav>
 );
}
eksporbawaan Tepung roti;

Komponen Tautan diimpor dari pustaka react-router-dom. Anda akan menggunakan komponen ini untuk membuat tautan ke bagian lain dari aplikasi. Anda juga bisa membuat rute yang dilindungi menggunakan komponen Tautan.

Array objek rute dibuat. Setiap objek rute berisi path dan properti remah roti. Properti path sesuai dengan jalur URL, dan properti remah roti sesuai dengan nama remah roti.

Itu gunakan Breadcrumb hook digunakan untuk membuat remah roti. Pengait ini menerima larik rute sebagai parameter. Rute digunakan untuk menghasilkan remah roti.

Metode peta digunakan untuk mengulangi larik remah roti. Untuk setiap remah roti, a komponen dibuat. Komponen Tautan memiliki a ke prop, yang sesuai dengan jalur URL remah roti. Remah roti itu sendiri dirender sebagai konten dari komponen.

Sekarang Anda dapat menambahkan beberapa gaya pada remah roti. Buat file CSS baru dan beri nama Breadcrumbs.css. Setelah itu, tambahkan aturan CSS berikut ke file:

.breadcrumb-tidak-aktif {
 warna: #cccccc;
}
.breadcrumb-aktif {
 warna: #000000;
}

Sekarang, Anda dapat mengimpor file CSS ke dalam komponen React dan menambahkan kelas remah roti ke file komponen:

impor { Tautan, gunakan Lokasi } dari 'bereaksi-router-dom'
impor gunakan Breadcrumb dari 'gunakan-reaksi-router-breadcrumb'
impor "./Breadcrumbs.css";
const rute = [
 { jalur: '/users/:userId', remah roti: 'Contoh 1' },
 { jalur: '/data', remah roti: 'Contoh 2' }
];
fungsiTepung roti() {
const remah roti = gunakan remah roti (rute);
const lokasi = useLocation()
kembali (
<nav>
 {breadcrumbs.map(({ cocok, remah roti }) => (
<Tautan 
 kunci={pertandingan.url} 
 ke={pertandingan.url}
 className={match.pathname location.pathname? "remah roti aktif": "remah roti-tidak-aktif"}
>
 {remah roti} / 
</Link>
 ))}
</nav>
 );
}
eksporbawaan Tepung roti;

Tingkatkan Keterlibatan Pengguna Dengan Remah Roti

Dengan remah roti, Anda tidak hanya dapat membantu pengguna memahami di mana mereka berada dalam situs web Anda, tetapi Anda juga dapat meningkatkan keterlibatan pengguna. Remah roti dapat digunakan untuk menunjukkan kemajuan pengguna melalui tugas, seperti proses pendaftaran atau pembelian. Dengan menunjukkan kemajuan pengguna, Anda dapat mendorong mereka untuk menyelesaikan tugas.

Ada juga banyak hal lain yang harus Anda ingat saat mendesain situs web seperti kegunaan, aksesibilitas, dan keramahan seluler. Namun, jika Anda mengingat hal-hal ini, Anda dapat membuat situs web yang ramah pengguna dan menarik.