React Router từ cơ bản đến nâng cao (v6+) Phần 2

Ở phần 1 chúng ta đã nói về một số điều cơ bản của React Router, trong bài viết này chúng ta sẽ đi đến những hướng dẫn nâng cao hơn nhé

Dynamic Routes

Dynamic Routes cho phép bạn tạo các route có thể xử lý các phần thay đổi trong URL. Điều này rất hữu ích khi hiển thị chi tiết của một mục cụ thể, chẳng hạn như sản phẩm hoặc hồ sơ người dùng.

Để định nghĩa một route động trong React Router, bạn sử dụng cú pháp :param trong đường dẫn của route. Ví dụ:

import { useParams } from 'react-router-dom'; function ProductDetails() { const { productId } = useParams(); return <div>Product ID: {productId}</div>;
} function App() { return ( <BrowserRouter> <Routes> <Route path="/products/:productId" element={<ProductDetails />} /> </Routes> </BrowserRouter> );
}

• Hook useParams(): Đây là một hook của React Router cho phép bạn truy cập các tham số động từ URL hiện tại. Bạn có thể gọi hook này trong component function được render bởi route động (trong trường hợp này là ProductDetails). Hook này trả về một đối tượng, trong đó các khóa là tên tham số được định nghĩa trong đường dẫn (ví dụ: productId) và các giá trị là các đoạn tương ứng từ URL.
• :productId: Cú pháp này trong thuộc tính path của <Route> định nghĩa một đoạn động. Bất kỳ giá trị nào trong vị trí này của URL sẽ được lưu trữ như tham số productId. Ví dụ, nếu URL là /products/42, hook useParams() trong ProductDetails sẽ trả về { productId: "42" }.

Programmatic Navigation

Hook useNavigate: Hook này cho phép bạn điều hướng giữa các routes trong ứng dụng một cách lập trình, thay vì dựa vào các component như <Link> hay <NavLink>. Điều này rất hữu ích trong các tình huống như sau khi người dùng gửi form hoặc cần điều hướng sau khi xác thực thành công.

Ví dụ sử dụng useNavigate:

import { useNavigate } from 'react-router-dom'; function Home() { const navigate = useNavigate(); const handleClick = () => { navigate('/about'); }; return <button onClick={handleClick}>Go to About</button>;
}

<Navigate /> Component

Component <Navigate />: Component này được sử dụng để chuyển hướng người dùng đến một route khác. Thường thì, bạn sẽ dùng <Navigate /> trong các tình huống như chuyển hướng sau khi xác thực người dùng, hoặc khi người dùng thực hiện một hành động nhất định.

import { Navigate } from 'react-router-dom'; function ProtectedRoute({ isLoggedIn, children }) { if (!isLoggedIn) { return <Navigate to="/login" replace />; } return children;
}

Prop replace: Prop replace của <Navigate /> sẽ thay thế mục hiện tại trong ngăn xếp lịch sử (history stack) thay vì thêm một mục mới. Điều này hữu ích trong các tình huống như kiểm tra xác thực và chuyển hướng, để tránh người dùng quay lại trang cũ khi nhấn nút "back" trên trình duyệt.

Cách Routing Thay Đổi Cấu Trúc Component trong React

Không sử dụng Router (Cấu trúc Component Truyền thống): Thông thường, trong một ứng dụng React đơn giản (không sử dụng router), chúng ta cấu trúc các component bên trong component App như thế này:

function App() { return ( <div> <Header /> <Main /> <Footer /> </div> );
}

Ở đây, App đóng vai trò như một container cha chứa tất cả các component, và tất cả chúng thường được render cùng nhau.

Khi có sự tham gia của React Router: Khi chúng ta giới thiệu React Router, cách chúng ta cấu trúc App thay đổi. Thay vì giữ tất cả các component trực tiếp trong App, chúng ta chủ yếu giữ cấu hình <BrowserRouter>, <Routes>, và <Route> ở đó. Nội dung trang thực tế được render bởi các component được khớp với các route.

**Tại sao **

1. Routing Điều Khiển Việc Hiển Thị

   • Trước khi có Router: App luôn render tất cả mọi thứ.
   • Với Router: Các trang khác nhau (routes) chỉ nên được load khi cần thiết.

2. Tại sao điều này lại tốt hơn? 📌

   • Hiệu Suất Cải Thiện: Chỉ các component cần thiết cho route hiện tại được load và render, giảm thời gian tải ban đầu và cải thiện hiệu suất tổng thể.
   • Trải Nghiệm Người Dùng Mượt Mà Hơn: Việc điều hướng giữa các views khác nhau xảy ra mà không cần tải lại toàn bộ trang, mang lại trải nghiệm người dùng liền mạch và nhanh chóng hơn.

Hiểu về React Router hơn thông qua hệ thống đường cao tốc

• Không có BrowserRouter, sẽ không có con đường!
• Không có Routes, sẽ không có các lối ra!
• Không có Route, bạn không thể đến đích!
• Không có Outlet, các lối ra lồng nhau không có nơi để hiển thị.

Kết luận

Điều hướng (Routing) là xương sống của việc điều hướng trong các ứng dụng React hiện đại. Nó cho phép chúng ta tạo ra các trải nghiệm đa trang mà không cần tải lại toàn bộ trang, giúp ứng dụng của chúng ta cảm giác nhanh hơn, năng động hơn và giống như ứng dụng gốc.

Với React Router, chúng ta có thể:

• Dễ dàng ánh xạ các URL vào các component.
• Kích hoạt điều hướng mượt mà phía client.
• Tổ chức các ứng dụng lớn thành các cấu trúc route rõ ràng, dễ mở rộng.
• Cải thiện trải nghiệm người dùng với điều hướng động, layout lồng nhau, các route bảo vệ và điều hướng chương trình.

Khi bạn xây dựng các ứng dụng React phức tạp hơn, việc thành thạo điều hướng sẽ mở ra một cấp độ sức mạnh và tính linh hoạt mới cho các dự án của bạn.