REACT JS

Bài 3: Routers
REACT JS
SPA (Single Page Application) vs MPA (Multi Page Application):

SPA MPA

Ưu điểm • Không cần tải lại trang trong quá trình sử dụng. • Tối ưu hóa SEO.
• Hỗ trợ sử dụng app kể cả khi offline. • Dễ dàng trong việc quản lý.
• Tăng trải nghiệm người dùng • Đồng bộ dữ liệu.

Nhược điểm • Có sự phức tạp trong quá trình xây dựng, phát triển do • Perform không cao do cần phải
cần đảm bảo sự phát triển đồng bộ của cả phía server request toàn bộ trang.
và client. • Tăng tải của phía server.
• Khó khăn hơn trong việc tối ưu hóa SEO.
• Init load lớn.
REACT JS – ROUTER
React-router-dom là một lib được dùng để routing trong reactjs-app .
Cài đặt: npm install react-router-dom
Một số ưu điểm khi sử dụng react-router-dom
 Tăng cao tính tổ chức của app.
 Giúp tạo ra bookmark cho page.
 Chuyển đổi linh hoạt giữa các component trong app.
 Tăng tính bảo mật của app thông qua việc tạo middleware.
REACT JS – ROUTER
Sau khi cài đặt để sử dụng react-router-dom ở trong app ta có thể làm theo các bước:

B1: Khởi tạo <BrowserRouter /> cho App.

Tại file /src/index.js ta import component < BrowserRouter /> của react-router-dom.
Để component < BrowserRouter /> bao lấy component < App />
 REACT JS – ROUTER
B2: Định nghĩa các route.
Tại thư mục /src tạo thư mục routes và file index.js .
Tạo component < AppRoutes /> để khai báo và quản lý route.

Import < Routes /> và < Route /> của package.

Trong đó:
< Routes /> : là Component đại diện cho danh sách các route mà ta sẽ khai
báo để sử dụng.
< Route /> : là Component đại diện cho từng route cụ thể.
Path: đường dẫn của route – VD localhost:3000/home-page
Element : Component sẽ được hiển thị khi vào đúng Path tương ứng
REACT JS – ROUTER
Import < AppRoutes /> vào < App /> và sử dụng như 1 component thường.
Để chuyển đổi giữa các Route ta có thể dùng component
<Link /> của package. Trong đó "to" là thuộc tính chứa đường dẫn mà ta
muốn chuyển tới
REACT JS – ROUTER
Nested router:
Trong thực tế ta sẽ gặp rất nhiều trường hợp như sau:
Người dùng xem danh sách sản phẩm ở đường dẫn: /cards
Sau đó click vào 1 sản phẩm và được điều hướng sang trang chi tiết : /cards/14
Ở đây ta có thể coi đường dẫn /cards/14 như một route con của /cards hay là nested route của /cards.
REACT JS – ROUTER
UseParams:
Để lấy được các params truyền vào url ta có thể sử dụng method
useParms được cung cấp bởi package
REACT JS – ROUTER
UseNavigate:
Để thực hiện chuyển trang ta có thể dùng component <Link /> của
package hoặc thực hiện một các dynamic thông qua method
useNavigate() được cung cấp bởi 'react-router-dom'