Vấn đề chính liên quan đến React Router và thêm một dự phòng để nắm bắt tất cả là có thể khó định cấu hình đúng tuyến dự phòng. Tuyến dự phòng cần được định cấu hình theo cách nó sẽ bắt được tất cả các yêu cầu, kể cả những yêu cầu không phải là tuyến hợp lệ. Nếu cấu hình không được thực hiện chính xác thì các yêu cầu cho các tuyến không hợp lệ sẽ không được tuyến dự phòng bắt và có thể dẫn đến lỗi hoặc hành vi không mong muốn. Ngoài ra, nếu ứng dụng chứa các tuyến động (ví dụ: dựa trên đầu vào của người dùng), thì những tuyến này cần được tính đến khi định cấu hình tuyến dự phòng để chúng cũng bị bắt bởi tuyến đó.
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App = () => (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
{/* Fallback route */}
<Route component={NoMatch} />
</Switch>
</Router>
);
// Dòng 1: Dòng này nhập các thành phần BrowserRouter, Route và Switch từ thư viện Reac-router-dom.
// Dòng 2: Dòng này định nghĩa một hằng số được gọi là Ứng dụng là một thành phần chức năng.
// Dòng 3: Dòng này hiển thị thành phần Bộ định tuyến từ Reac-router-dom.
// Dòng 4: Dòng này kết xuất thành phần Switch từ Reac-router-dom.
// Dòng 5 & 6: Các dòng này hiển thị hai thành phần Tuyến đường với các đường dẫn chính xác và các thành phần sẽ được hiển thị khi các đường dẫn đó được khớp.
// Dòng 8: Dòng này hiển thị một tuyến dự phòng nếu không có tuyến nào khác phù hợp. Nó sẽ hiển thị thành phần NoMatch nếu không có tuyến nào khác khớp.
Bộ định tuyến phản ứng là gì
React Router là một thư viện định tuyến cho các ứng dụng React. Nó cho phép các nhà phát triển tạo các tuyến và thành phần có thể được sử dụng để điều hướng giữa các trang khác nhau trong ứng dụng React. Nó cũng cung cấp các tính năng như kết hợp tuyến đường động, tham số truy vấn và trạng thái vị trí. Ngoài ra, nó cung cấp hỗ trợ cho kết xuất phía máy chủ và chia tách mã.
Lộ trình dự phòng toàn bộ
Tuyến dự phòng toàn bộ là tuyến trong Bộ định tuyến React khớp với bất kỳ đường nào chưa được khớp bởi bất kỳ tuyến nào khác. Loại đường dẫn này thường được sử dụng để tạo trang 404 hoặc để hiển thị một thành phần cho tất cả các đường dẫn chưa khớp. Điều quan trọng cần lưu ý là tuyến đường dự phòng bắt tất cả phải luôn là tuyến đường cuối cùng trong danh sách các tuyến đường, vì tuyến đường này sẽ khớp với bất kỳ tuyến đường nào và ngăn không cho các tuyến đường khác khớp với nhau.
Cách xác định tuyến đường dự phòng đúng cách
Khi sử dụng Bộ định tuyến React, tuyến dự phòng là tuyến được sử dụng khi không có tuyến nào khác khớp với URL được yêu cầu. Nó thường được sử dụng để chuyển hướng người dùng đến trang 404 hoặc một số trang khác khi URL được yêu cầu không tồn tại.
Để xác định đúng một tuyến dự phòng trong React Router, trước tiên bạn nên tạo một
Tại sao tuyến đường dự phòng luôn được kích hoạt
Tuyến dự phòng trong React Router luôn được kích hoạt khi đường dẫn URL không khớp với bất kỳ tuyến hiện có nào. Điều này có thể xảy ra khi người dùng nhập thủ công một URL không chính xác hoặc nếu logic định tuyến của ứng dụng không được định cấu hình đúng cách. Lộ trình dự phòng cho phép nhà phát triển xử lý các tình huống này một cách khéo léo và cung cấp phản hồi cho người dùng, chẳng hạn như trang 404 hoặc chuyển hướng họ đến trang chủ.
