Cách tạo Breadcrumbs trong React.js

Bạn đã bao giờ nhận thấy những đoạn văn bản nhỏ đó trên một số trang web biểu thị vị trí hiện tại của bạn trong trang web chưa? Chúng được gọi là breadcrumbs và chúng có thể là một cách hữu ích để định hướng người dùng, đặc biệt là khi điều hướng qua các trang web phức tạp. Bài viết này sẽ hướng dẫn bạn cách tạo breadcrumbs trong React.js.

Breadcrumbs là gì và chúng quan trọng như thế nào?

Breadcrumbs thường là những đoạn văn bản nhỏ hiển thị vị trí hiện tại trong một trang web. Chúng có thể hữu ích trong việc định hướng người dùng, đặc biệt khi điều hướng qua các trang web có nhiều trang. Bằng cách cung cấp một đường dẫn liên kết, breadcrumbs có thể giúp người dùng hiểu vị trí của họ trong một trang web và cho phép họ điều hướng trở lại các phần trước đó một cách dễ dàng.

Điều quan trọng cần lưu ý là không nên sử dụng breadcrumbs làm phương tiện điều hướng chính trên trang web. Thay vào đó, chúng nên được sử dụng cùng với các yếu tố điều hướng khác như menu hoặc thanh tìm kiếm.

Cách tạo Breadcrumbs trong React.js

Có hai cách chính để tạo breadcrumbs trong React.js: bằng cách sử dụng react-router-dom thư viện hoặc bằng cách sử dụng use-react-router-breadcrumbs thư viện. Nhưng trước khi bắt đầu, bạn phải tạo một ứng dụng React.

Phương pháp 1: Bằng cách sử dụng Thư viện react-router-dom

Với thư viện react-router-dom, bạn có thể tạo breadcrumbs theo cách thủ công cho mọi đường dẫn trong ứng dụng React của mình. Thư viện cung cấp một thành phần có thể được sử dụng để tạo breadcrumbs.

Để sử dụng thư viện react-router-dom, trước tiên bạn cần cài đặt nó bằng npm:

npm install react-router-dom

Khi thư viện đã được cài đặt, bạn có thể nhập nó vào thành phần React của mình:

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

Sau đó, bạn có thể sử dụng thành phần để tạo breadcrumbs:

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

Bây giờ, bạn có thể thêm một số kiểu vào breadcrumbs và đánh dấu trang hiện tại mà bạn đang truy cập. Để làm được điều đó, bạn có thể sử dụng tên lớp prop của thành phần . Để lấy tên đường dẫn hiện tại, bạn có thể sử dụng địa điểm đối tượng từ thư viện 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;

Bây giờ, hãy tạo một tệp CSS mới và đặt tên cho nó breadcrumbs.css. Thêm các quy tắc CSS sau vào tệp:

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

Bây giờ, hãy nhập tệp CSS của bạn vào thành phần React và thêm breadcrumb-arrow lớp cho các thành phần của bạn:

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;

Có nhiều loại hook khác nhau trong React. Thư viện react-router-dom’s useLocation hook cung cấp cho bạn quyền truy cập vào đối tượng vị trí, đối tượng này có thông tin về đường dẫn URL hiện tại.

Phần hỗ trợ className của thành phần thêm một lớp CSS vào breadcrumbs. Mệnh đề className nhận một chuỗi hoặc một mảng chuỗi. Nếu đó là một chuỗi, nó sẽ thêm chuỗi dưới dạng một lớp duy nhất vào phần tử. Nếu đó là một mảng các chuỗi, mỗi chuỗi trong mảng sẽ thêm vào dưới dạng một lớp riêng biệt.

Các bắt đầu với phương pháp kiểm tra xem tên đường dẫn hiện tại có bắt đầu bằng “/ products” hay không. Điều này là do đường dẫn cho trang sản phẩm phải hoạt động không chỉ khi đường dẫn là “/ products” mà còn khi đường dẫn là “/ products / 1”, “/ products / 2”, v.v.

Phương pháp 2: Bằng cách sử dụng Thư viện use-react-router-breadcrumbs

Một cách khác để tạo breadcrumbs trong React là sử dụng thư viện use-react-router-breadcrumbs. Thư viện này tự động tạo breadcrumbs dựa trên các tuyến được xác định trong ứng dụng React của bạn.

Để sử dụng thư viện này, trước tiên bạn cần cài đặt nó bằng npm:

npm install use-react-router-breadcrumbs

Khi thư viện đã được cài đặt, bạn có thể nhập nó vào thành phần React của mình:

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

Sau đó, bạn có thể sử dụng useBreadcrumbs hook để tạo breadcrumbs:

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

Thao tác này sẽ ghi một mảng các đối tượng breadcrumb vào bảng điều khiển. Mỗi đối tượng breadcrumb chứa thông tin về tuyến đường, chẳng hạn như tên, đường dẫn và thông số.

Bây giờ, bạn có thể hiển thị breadcrumbs cho màn hình. Bạn có thể sử dụng thành phần từ thư viện react-router để tạo breadcrumbs:

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;

Thành phần Liên kết được nhập từ thư viện react-router-dom. Bạn sẽ sử dụng thành phần này để tạo liên kết đến các phần khác của ứng dụng. Bạn cũng có thể tạo các tuyến đường được bảo vệ bằng cách sử dụng thành phần Liên kết.

Một mảng các đối tượng tuyến đường được tạo. Mỗi đối tượng route chứa một đường dẫn và một thuộc tính breadcrumb. Thuộc tính đường dẫn tương ứng với đường dẫn URL và thuộc tính đường dẫn tương ứng với tên của đường dẫn.

Các useBreadcrumbs hook được sử dụng để tạo breadcrumbs. Hook này chấp nhận một mảng các tuyến đường như một tham số. Các tuyến đường được sử dụng để tạo đường dẫn.

Phương thức bản đồ được sử dụng để lặp qua mảng breadcrumbs. Đối với mỗi breadcrumb, một thành phần được tạo. Thành phần liên kết có đến prop, tương ứng với đường dẫn URL của breadcrumb. Bản thân breadcrumb được hiển thị dưới dạng nội dung của thành phần .

Bây giờ bạn có thể thêm một số kiểu cho breadcrumbs. Tạo một tệp CSS mới và đặt tên cho nó Breadcrumbs.css. Sau đó, thêm các quy tắc CSS sau vào tệp:

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

Bây giờ, bạn có thể nhập tệp CSS vào thành phần React và thêm các lớp breadcrumb vào các thành phần :

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;

Tăng mức độ tương tác của người dùng với Breadcrumbs

Với breadcrumbs, bạn không chỉ có thể giúp người dùng hiểu họ đang ở đâu trong trang web của bạn mà còn có thể tăng mức độ tương tác của người dùng. Breadcrumbs có thể được sử dụng để hiển thị tiến trình của người dùng thông qua một tác vụ, chẳng hạn như quá trình đăng ký hoặc mua hàng. Bằng cách hiển thị tiến trình của người dùng, bạn có thể khuyến khích họ hoàn thành nhiệm vụ.

Ngoài ra còn có nhiều điều khác mà bạn cần lưu ý khi thiết kế một trang web như khả năng sử dụng, khả năng truy cập và tính thân thiện với thiết bị di động. Tuy nhiên, nếu bạn ghi nhớ những điều này, bạn có thể tạo ra một trang web vừa thân thiện với người dùng vừa hấp dẫn.