Cara Membuat Breadcrumb di React.js

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


Apa Itu Breadcrumb dan Bagaimana Pentingnya?

Breadcrumb biasanya berupa potongan kecil teks yang menunjukkan lokasi saat ini dalam sebuah situs web. Mereka dapat membantu dalam 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 dalam sebuah situs web dan memungkinkan mereka untuk menavigasi kembali ke bagian sebelumnya dengan mudah.

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

Cara Membuat Breadcrumb di React.js

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

Metode 1: Dengan Menggunakan Perpustakaan react-router-dom

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

Untuk menggunakan perpustakaan react-router-dom, Anda harus menginstalnya terlebih dahulu menggunakan npm:

npm install react-router-dom

Setelah library terinstal, Anda dapat mengimpornya ke dalam komponen React Anda:

See also  Pelajari 8 Bahasa Ini untuk Membuat Kode Seperti Pro di AWS Cloud

import { Link } from 'react-router-dom'

Anda kemudian dapat menggunakan komponen untuk membuat remah roti:

<Link to="/">Home</Link>
<Link to="/products">Products</Link>
<Link to="/products/1">Product 1</Link>

Sekarang, Anda dapat menambahkan beberapa gaya ke remah roti dan menyorot halaman saat ini tempat Anda berada. Untuk itu, Anda dapat menggunakan nama kelas penyangga dari komponen. Untuk mendapatkan nama path saat ini, Anda dapat menggunakan lokasi objek dari perpustakaan react-router-dom:

import { Link, useLocation } from 'react-router-dom'
function Breadcrumbs() {
const location = useLocation();
return (
<nav>
<Link to="/"
className={location.pathname === "/" ? "breadcrumb-active" : "breadcrumb-not-active"}
>
Home
</Link>
<Link to="/products"
className={location.pathname.startsWith("/products") ? "breadcrumb-active" : "breadcrumb-not-active"}
>
Products
</Link>
<Link to="/products/1"
className={location.pathname === "/products/1" ? "breadcrumb-active" : "breadcrumb-not-active"}
>
Product 1
</Link>
</nav>
);
}
export default Breadcrumbs;

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

.breadcrumb-not-active {
color:
}
.breadcrumb-active {
color:
}
.breadcrumb-arrow {
margin-left: 10px;
margin-right: 10px;
}

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

import { Link, useLocation } from 'react-router-dom'
import "./breadcrumbs.css";
function Breadcrumbs() {
const location = useLocation();
return (
<nav>
<Link to="/"
className={location.pathname === "/" ? "breadcrumb-active" : "breadcrumb-not-active"}
>
Home
</Link>
<span className="breadcrumb-arrow">&gt;</span>
<Link to="/products"
className={location.pathname.startsWith("/products") ? "breadcrumb-active" : "breadcrumb-not-active"}
>
Products
</Link>
<span className="breadcrumb-arrow">&gt;</span>
<Link to="/products/1"
className={location.pathname === "/products/1" ? "breadcrumb-active" : "breadcrumb-not-active"}
>
Product 1
</Link>
</nav>
);
}
export default Breadcrumbs;

Ada berbagai jenis hook di React. Pustaka reaksi-router-dom gunakanLokasi 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 itu string, itu akan menambahkan string sebagai satu kelas ke elemen. Jika itu adalah array string, setiap string dalam array akan ditambahkan sebagai kelas terpisah.

See also  Cara Menangani Kesalahan dalam JavaScript

Itu dimulai dengan metode memeriksa apakah nama jalur saat ini dimulai dengan “/ produk”. Ini karena remah roti 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 perpustakaan use-react-router-breadcrumbs. Pustaka ini secara otomatis menghasilkan remah roti berdasarkan rute yang ditentukan dalam aplikasi React Anda.

Untuk menggunakan perpustakaan ini, Anda harus menginstalnya terlebih dahulu menggunakan npm:

npm install use-react-router-breadcrumbs

Setelah library terinstal, Anda dapat mengimpornya ke dalam komponen React Anda:

import useBreadcrumbs from 'use-react-router-breadcrumbs'

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

const breadcrumbs = useBreadcrumbs();
console.log(breadcrumbs);

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

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

import { Link } from 'react-router-dom'
import useBreadcrumbs from 'use-react-router-breadcrumbs'
const routes = [
{ path: '/users/:userId', breadcrumb: 'Example 1' },
{ path: '/data', breadcrumb: 'Example 2' }
];
function Breadcrumbs() {
const breadcrumbs = useBreadcrumbs(routes);
console.log(breadcrumbs)
return (
<nav>
{breadcrumbs.map(({ match, breadcrumb }) => (
<Link key={match.url} to={match.url}>
{breadcrumb} /
</Link>
))}
</nav>
);
}
export default Breadcrumbs;

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

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

See also  5 Kerangka WebAssembly Rust untuk Aplikasi Anda Berikutnya

Itu gunakan remah roti hook digunakan untuk membuat remah roti. Hook ini menerima array rute sebagai parameter. Rute digunakan untuk menghasilkan remah roti.

Metode peta digunakan untuk mengulangi array remah roti. Untuk setiap remah roti, a komponen dibuat. Komponen Link memiliki ke prop, yang sesuai dengan jalur URL remah roti. Breadcrumb itu sendiri dirender sebagai isi dari komponen.

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

.breadcrumb-not-active {
color:
}
.breadcrumb-active {
color:
}

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

import { Link, useLocation } from 'react-router-dom'
import useBreadcrumbs from 'use-react-router-breadcrumbs'
import "./Breadcrumbs.css";

const routes = [
{ path: '/users/:userId', breadcrumb: 'Example 1' },
{ path: '/data', breadcrumb: 'Example 2' }
];
function Breadcrumbs() {
const breadcrumbs = useBreadcrumbs(routes);
const location = useLocation()
return (
<nav>
{breadcrumbs.map(({ match, breadcrumb }) => (
<Link
key={match.url}
to={match.url}
className={match.pathname === location.pathname ? "breadcrumb-active" : "breadcrumb-not-active"}
>
{breadcrumb} /
</Link>
))}
</nav>
);
}
export default Breadcrumbs;

Tingkatkan Keterlibatan Pengguna Dengan Breadcrumbs

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. Breadcrumb dapat digunakan untuk menunjukkan kemajuan pengguna melalui suatu 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.