Routing là một phần cực kỳ quan trọng khi phát triển các ứng dụng ReactJS dạng SPA (Single Page Application). Nếu bạn từng tự hỏi vì sao chỉ với một file HTML duy nhất, ứng dụng React vẫn có thể “chuyển trang” mượt mà, thì đây chính là bài viết dành cho bạn.
1. Routing trong React là gì?
Routing trong React là quá trình điều hướng giữa các trang (hoặc component) khác nhau mà không cần reload lại toàn bộ trang web. Đây là một đặc trưng nổi bật của các SPA, giúp tăng trải nghiệm người dùng và tối ưu hiệu suất.
Vậy vì sao cần dùng routing?
React chỉ có 1 file HTML duy nhất (thường là index.html), nên không thể dùng cách truyền thống để chuyển trang.
Routing giúp hiển thị component tương ứng với URL hiện tại.
Tránh việc tải lại toàn trang → tốc độ nhanh hơn, trải nghiệm mượt mà hơn.
2. React-router-dom
React-router-dom là thư viện phổ biến nhất để xử lý routing trong ứng dụng ReactJS. Nó cho phép điều hướng linh hoạt giữa các trang, dễ dùng và mạnh mẽ.
Cách cài đặt:
npm install react-router-dom
3. Các thành phần chính trong React Router Dom
a. Browserouter
BrowserRouter là một thành phần toàn bộ ứng dụng React của bạn để cung cấp ngữ cảnh định tuyến cho các thành phần con. Nó sử dụng History API có sẵn trong trình duyệt HTML5 để quản lý URL mà không cần reload trang.
Tác dụng chính:
- Theo dõi lịch sử điều hướng (history stack).
- Đồng bộ URL trên thanh địa chỉ trình duyệt với giao diện ứng dụng.
- Cho phép các thành phần như Route, Link, Navigate hoạt động đúng.
b. Route
Là nơi cho phép ta định nghĩa các URL cho ứng dụng của mình và xác định thành phần sẽ hiển thị khi ta truy cập URL đó.
c. Link
Link là một component do react-router-dom cung cấp, dùng để tạo liên kết điều hướng giữa các trang trong ứng dụng React.
Nó thay thế cho thẻ HTML , nhưng không gây reload lại toàn bộ trang web như .
d. Routes
Routes sẽ kiểm tra lần lượt các Route con và chỉ render Route đầu tiên khớp với URL.
Từ phiên bản của React Router V6 trở lên, Switch được thay thế bằng Routes.
e. Navigate
Navigate là một component trong react-router-dom dùng để chuyển hướng người dùng từ một URL này sang một URL khác bằng code thay vì người dùng click chuột để chuyển trang.
4. Một số hook trong React Router
a. useLocation()
Dùng để trả về thông tin của URL hiện tại (Vd: đường dẫn, query string, hash và state nếu có)
Khi nào cần sử dụng:
- Khi cần biết được hiện tại của người dùng đang trong app
- Để lấy thông tin từ Url hoặc truyền dữ liệu giữa các trang.
b. useParams()
useParams là hook dùng để lấy các tham số động từ URL.
Khi nào sử dụng:
- Các route có thể có phần động, như /user/:id hoặc /post/:slug.
- Cần lấy id, slug đó để fetch dữ liệu từ server hoặc render chi tiết.
c. useNavigate()
Trả về một hàm cho phép bạn điều hướng theo chương trình trong trình duyệt để đáp ứng với các tương tác hoặc hiệu ứng của người dùng.
Khi nào sử dụng: Muốn điều hướng sau một sự kiện: đăng nhập thành công, submit form, xóa dữ liệu thành công,..
5. Các tính năng nâng cao của React Router
a. Định tuyến lồng nhau:
- Nested Routes cho phép bạn lồng các route nhỏ vào bên trong route cha.
b. Định tuyến có điều kiện:
Dùng để chặn người dùng vào các trang theo ý muốn của lập trình viên khi chưa đủ điều kiện, để đảm bảo tính bảo mật cho trang.
VD: Chặn người dùng vào các trang bên trong khi chưa đăng nhập,…
c. Lazy Loading
Lazy Loading cho phép chỉ tải component khi cần thiết, giúp giảm kích thước file tải ban đầu
Sử dụng khi nào: Khi ứng dụng lớn, có hàng trăm component
6. Xử lý trang lỗi (404 – Not Found)
Khi gặp trường hợp trang lỗi hay url không khớp với các url đã định sẵn, thì chúng ta cần hiển thị một trang chung cho trường hợp gặp lỗi này.
Một phút quảng cáo của mình :33
Nếu bạn là sinh viên sống tại Làng Đại học Thủ Đức và đang tìm kiếm một nền tảng đặt đồ ăn nhanh, ngon, đúng giờ, thì đừng bỏ qua vnuEats – Website đặt đồ ăn siêu tiện lợi dành riêng cho sinh viên Làng!
🔥 Tại sao chọn vnuEats.com?
- Giao diện đơn giản, dễ dùng
- Nhiều món ngon từ các quán uy tín trong Làng
- Có đánh giá, review thật từ người dùng tại đây
- Ưu đãi hàng tuần dành cho sinh viên
👉 Truy cập ngay: tại đây
👉 Xem review Dông nướng đá: tại đây
👉 Xem review Chóc quạch nướng: tại đây
👉 Xem review Bánh hỏi Bình Định: tại đây
👉 Xem review Lẩu chay Thái: tại đây
Top comments (2)
quá đỉnh luôn
quá hayy