Vấn đề chính liên quan đến tham số URL của Bộ định tuyến React là chúng có thể khó sử dụng trong các tuyến động. Điều này là do các tham số URL là tĩnh và không thể thay đổi sau khi tuyến đường đã được tạo. Điều này có nghĩa là nếu người dùng cần truy cập một trang khác với các tham số khác nhau, họ sẽ cần tạo một tuyến đường mới cho từng kết hợp tham số. Ngoài ra, khi sử dụng tham số URL, có thể khó theo dõi tất cả các kết hợp có thể có và đảm bảo rằng từng kết hợp được bộ định tuyến xử lý đúng cách.
import {
BrowserRouter as Router,
Route,
Link,
useParams
} from "react-router-dom";
const App = () => {
return (
<Router>
<div>
<Route path="/user/:username" component={UserPage} />
</div>
</Router>
);
};
const UserPage = () => {
let { username } = useParams(); // Get the username from the URL.
return (
<div>Hello, {username}!</div> // Render a greeting with the username.
);
};
Mã này đang thiết lập Bộ định tuyến React để hiển thị trang có tên người dùng từ URL.
1. Dòng đầu tiên nhập các thành phần từ thư viện React Router DOM.
2. Hàm Ứng dụng trả về thành phần Bộ định tuyến với thành phần Tuyến đường bên trong, thành phần này chỉ định rằng bất kỳ URL nào bắt đầu bằng “/user/” sẽ hiển thị thành phần Trang người dùng.
3. Hàm UserPage sử dụng useParams() để lấy tên người dùng từ URL và sau đó hiển thị lời chào bằng tên người dùng đó.
thông số URL
Tham số URL trong Bộ định tuyến React là các phần dữ liệu được chuyển đến một tuyến đường như một phần của URL. Chúng cho phép các nhà phát triển chuyển thông tin động tới một tuyến đường, chẳng hạn như ID hoặc chuỗi truy vấn. Điều này có thể được sử dụng để tạo các tuyến động có thể được sử dụng cho những việc như hiển thị các mục cụ thể từ cơ sở dữ liệu hoặc lọc nội dung dựa trên đầu vào của người dùng. React Router cung cấp các công cụ để truy cập và thao tác với các tham số URL, giúp bạn dễ dàng sử dụng chúng trong ứng dụng của mình.
Làm cách nào để bạn nhận được thông số URL từ một tuyến đường trong React
Trong React Router, bạn có thể truy cập các tham số URL từ một route bằng cách sử dụng hook useParams. Móc này trả về một đối tượng chứa các cặp khóa-giá trị của các tham số URL. Ví dụ: nếu tuyến đường của bạn là /user/:id, bạn có thể truy cập tham số id bằng useParams().id.
