SBA301 - Chương 4: React Router — điều hướng phía client
Định tuyến trong ứng dụng React bằng react-router-dom: bọc toàn bộ route trong Router hoặc BrowserRouter, khai báo tham số đường dẫn bằng dấu hai chấm và đọc nó bằng hook useParams. Trình bày component Outlet cho route lồng nhau, vai trò của Switch trong bản v5 là kết xuất route khớp đầu tiên, cách bắt trang 404 bằng route dấu sao đặt cuối cùng, và vì sao định tuyến phía client cho trải nghiệm mượt hơn nhờ giảm số lần gọi về máy chủ.
Bắt đầu bằng Chế độ học nếu bạn muốn đáp án và giải thích hiện ngay sau mỗi câu — không bấm giờ, dừng lúc nào cũng được. Chọn Thi thử khi muốn biết mình đang ở đâu: có bấm giờ, chấm điểm ở cuối, và giải thích chỉ mở sau khi nộp.
Luyện tập theo chủ đề này
Câu hỏi của chủ đề
<Routes> <Route path="/" element={
<Home />
}
/> <Route path="/about" element={
<About />
}
/> <Route path="*" element={
<NotFound />
}
/> </Routes>Để xử lý trang 404 Not Found trong React Router, bạn có thể sử dụng <Route path="*" element={ <NotFound /> } /> như một tuyến đường cuối cùng. Điều này cho phép bạn định nghĩa một thành phần <NotFound> để hiển thị khi người dùng truy cập vào một đường dẫn không tồn tại. Ví dụ, nếu bạn thêm <Route path="*" element={ <NotFound /> } /> như một tuyến đường cuối cùng trong danh sách các tuyến đường, thì khi người dùng truy cập vào một đường dẫn không tồn tại, React Router sẽ tự động hiển thị thành phần <NotFound>.
React Router v6 là một công cụ giúp quản lý đường dẫn trong ứng dụng React. Nó cho phép bạn tạo ra các đường dẫn động và quản lý trạng thái ứng dụng. Để sử dụng React Router v6, bạn cần phải.wrap các tuyến đường trong <Router> hoặc <BrowserRouter>. Điều này giúp React Router biết được đường dẫn hiện tại và có thể điều hướng ứng dụng đến đúng tuyến đường. Ngoài ra, <Switch> vẫn được sử dụng để nhóm các tuyến đường, giúp ứng dụng có thể xử lý các tuyến đường trùng nhau một cách hiệu quả. Tuy nhiên, React Router v6 không hỗ trợ routing dựa trên hash, vì vậy bạn không thể sử dụng nó để tạo ra các đường dẫn dựa trên hash. Tóm lại, để sử dụng React Router v6, bạn cần phải.wrap các tuyến đường trong <Router> hoặc <BrowserRouter> và sử dụng <Switch> để nhóm các tuyến đường.
Trong React Router, <Outlet /> là một thành phần quan trọng trong việc quản lý các đường dẫn con (nested routes). Mục đích chính của <Outlet /> là render (hiển thị) phần tử con phù hợp với đường dẫn hiện tại. Khi bạn sử dụng <Outlet />, nó sẽ tìm kiếm và hiển thị phần tử con phù hợp với đường dẫn hiện tại, giúp bạn có thể tổ chức các đường dẫn một cách linh hoạt và dễ dàng quản lý.
Trong React Router, thành phần <Switch> đóng vai trò quan trọng trong việc định tuyến. Nó được sử dụng để nhóm nhiều tuyến đường lại với nhau và chỉ render tuyến đường đầu tiên mà nó gặp phải. Điều này có nghĩa là khi bạn sử dụng <Switch>, React Router sẽ chỉ render tuyến đường đầu tiên mà nó tìm thấy mà không cần phải render các tuyến đường khác. Điều này giúp tăng hiệu suất và giảm thiểu việc render không cần thiết. Ngoài ra, <Switch> cũng giúp bạn dễ dàng quản lý và tổ chức các tuyến đường trong ứng dụng của mình.
<Routes> <Route path="/" element={
<Home />
}
/> <Route path="/about" element={
<About />
}
/> <Route path="*" element={
<NotFound />
}
/> </Routes>Để xử lý trang 404 Not Found trong React Router, bạn cần thêm một route đặc biệt có path là ".*". Điều này cho phép React Router bắt gặp và chuyển hướng đến trang 404 khi người dùng truy cập vào một URL không tồn tại. Bạn có thể thêm route này vào cuối danh sách các route như sau: <Route path="*" element={ <NotFound /> } />. Điều này cho phép bạn định nghĩa một component riêng biệt để hiển thị khi người dùng truy cập vào một URL không tồn tại. Ngoài ra, bạn cũng có thể sử dụng component này để hiển thị thông tin về trang không tồn tại, chẳng hạn như một liên kết quay lại trang chủ hoặc một thông báo về trang không tồn tại.
Đề có câu hỏi của chủ đề này
2 đề chứa ít nhất một câu thuộc chủ đề — mở đề để làm cả bộ, không chỉ từng câu.