Routing là gì
Routing đề cập đến quá trình điều hướng giữa các trang hoặc giao diện khác nhau trong một ứng dụng một trang (SPA) mà không cần tải lại toàn bộ trang.
- Nó giữ cho giao diện người dùng đồng bộ với URL trình duyệt hiện tại.
- Cho phép chúng ta xây dựng các Ứng dụng Một Trang (SPA
Tại sao cần phải Routing trong React
Các ứng dụng React là SPA, nghĩa là chỉ có một tệp HTML duy nhất (index.html), nhưng có nhiều giao diện (trang) khác nhau mà người dùng có thể điều hướng tới. Routing giúp quản lý các giao diện này bằng cách khớp URL với component tương ứng.
Nó cho phép điều hướng phía client mà không cần tải lại toàn bộ trang, giúp người dùng di chuyển mượt mà giữa các URL như /home, /about hoặc /contact, mỗi URL hiển thị các component khác nhau.
React không có hệ thống định tuyến (routing) tích hợp sẵn, vì vậy chúng ta sử dụng một thư viện như React Router (react-router-dom) để xử lý định tuyến.
Ứng dụng trang đơn (SPA) là gì?
Một Ứng dụng Trang Đơn (SPA) cập nhật trang một cách động mà không cần tải lại, mang đến trải nghiệm người dùng liền mạch.
- Chạy hoàn toàn trên trình duyệt (Phía Client).
- Các URL khác nhau sẽ tải các component React khác nhau.
- Sử dụng JavaScript (React) để cập nhật giao diện người dùng một cách động.
- Lấy thêm dữ liệu thông qua các API (ví dụ: từ máy chủ backend).
Khi người dùng nhấp vào liên kết, URL sẽ được cập nhật và React sẽ tải thành phần tương ứng một cách động.
React Router
React Router là thư viện phổ biến nhất để xử lý điều hướng trong một ứng dụng React.
- Cho phép điều hướng dựa trên URL.
- Thay đổi URL trình duyệt mà không cần tải lại trang.
- Giữ cho giao diện người dùng đồng bộ với URL.
Cài đặt
npm install react-router-dom
Định nghĩa Routes
Với định tuyến (routing), chúng ta ánh xạ các URL khác nhau đến các giao diện người dùng (UI) khác nhau. Trong trường hợp của React, chúng ta ánh xạ một URL đến một Component cụ thể của React, và mỗi ánh xạ như vậy được gọi là một route.
Kể từ React Router v6.4, có hai cách chính để định nghĩa các route. Chúng ta sẽ tập trung vào cách khai báo truyền thống (declarative way).
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About"; function App() { return ( <BrowserRouter> {/* 🚀 Enables routing */} <Routes> {/* 🚦 Manages route paths */} <Route index element={<Home />} /> {/* Default route */} <Route path="/about" element={<About />} /> </Routes> </BrowserRouter> );
} function Nav() { return ( <nav> <Link to="/">Home</Link> {/* Link to Home */} <Link to="/about">About</Link> {/* Link to About */} </nav> );
}
Các Khái Niệm Chính 🔑
<BrowserRouter>– Bộ cung cấp Router
- Là component cấp cao nhất cho phép định tuyến trong ứng dụng React của bạn.
- Sử dụng HTML5 History API để đồng bộ giao diện người dùng với URL của trình duyệt.
- Quan trọng: nếu không có <BrowserRouter>, React Router sẽ không thể quản lý các route trong ứng dụng của bạn.
-
<Routes>– Bộ chứa Routing Component này đóng vai trò là bộ chứa cho các định nghĩa <Route> riêng lẻ. Nó duyệt qua các thẻ <Route> con của nó và render thẻ đầu tiên có đường dẫn khớp với URL hiện tại của trình duyệt. Hãy hình dung <Routes> như một trung tâm điều phối giao thông, điều hướng tới "lối ra" phù hợp. Đây là bản kế nhiệm của component <Switch> trong các phiên bản cũ hơn của React Router. -
<Route>– Định nghĩa Đường dẫn và Component
-
Mỗi component <Route> là một ánh xạ giữa một đường dẫn URL cụ thể và một component React tương ứng.
-
Khi URL trình duyệt khớp với đường dẫn của một <Route>, element (component React) của route đó sẽ được hiển thị.
-
Thuộc tính index dùng để định nghĩa route con mặc định (thay vì path="/").
-
Xử lý Trang Không Tìm Thấy (Page Not Found): Được thực hiện bằng cách thêm một <Route path="*"> để bắt các đường dẫn không khớp với bất kỳ route nào đã định nghĩa.
<Route index element={<Home />} /> <Route path="*" element={<PageNotFound />} />
Thuộc tính path="*" hoạt động như một bộ bắt tất cả. Nếu không có route nào khác được định nghĩa khớp với URL hiện tại, route này sẽ được kích hoạt và component
sẽ được hiển thị.
<NavLink> / <Link>– Điều hướng mà không cần tải lại trang
import { NavLink } from "react-router-dom"; function Navigation() { return ( <nav> <NavLink to="/">Home</NavLink> <NavLink to="/about">About</NavLink> </nav> );
}
- Route lồng vào nhau (nested)
Khi ứng dụng của bạn phát triển, bạn có thể gặp phải những tình huống mà các phần khác nhau có điều hướng và view riêng. Đây là lúc các route lồng nhau trở nên hữu ích.
Hãy tưởng tượng một phần /dashboard với các trang con như /dashboard/profile và /dashboard/settings.
Để triển khai điều này, bạn định nghĩa các component <Route> con bên trong một <Route> cha.
Chìa khóa để render nội dung của các route lồng nhau là component <Outlet /> trong component của route cha.
<Routes> <Route path="/dashboard" element={<Dashboard />}> <Route path="profile" element={<Profile />} /> <Route path="settings" element={<Settings />} /> </Route>
</Routes>
<Outlet>trong React Router
Component <Outlet> đóng vai trò là một placeholder trong component được render bởi một route cha. Khi một route con của route cha khớp với URL hiện tại, component tương ứng của route con sẽ được render bên trong <Outlet> trong component của route cha.
Tại sao <Outlet> lại quan trọng?
- Nó cho phép bạn tạo các layout có thể tái sử dụng. Các phần UI chung như thanh điều hướng, thanh bên và footer có thể được định nghĩa trong component cha, trong khi nội dung cụ thể của các route con sẽ được chèn động vào trong <Outlet>.
- Điều này thúc đẩy một cấu trúc component sạch sẽ và có tổ chức. import { Outlet, Link } from "react-router-dom";
const Dashboard = () => { return ( <div> <nav> <Link to="/profile">Profile</Link> <Link to="/settings">Settings</Link> </nav> <hr /> <Outlet /> {/* Child route components will be rendered here */} </div> );
}; export default Dashboard;