Vấn đề chính liên quan đến việc thêm tham số vào URL React Router là người dùng có thể dễ dàng thao tác các tham số. Điều này có thể dẫn đến các vấn đề về bảo mật vì những người dùng ác ý có thể sử dụng các tham số này để giành quyền truy cập vào các tài nguyên hoặc dữ liệu trái phép. Ngoài ra, nếu các giá trị tham số không được xác thực đúng cách, nó có thể dẫn đến hành vi không mong muốn trong ứng dụng. Cuối cùng, nếu thêm quá nhiều tham số, nó có thể gây ra các vấn đề về hiệu suất do độ phức tạp của URL tăng lên.
import {
BrowserRouter as Router,
Route,
Link,
useParams
} from "react-router-dom";
<Router>
<Route path="/user/:username">
<User />
</Route>
<Link to="/user/john">John</Link>
function User() {
let { username } = useParams();
return (
<div>{username}</div> // renders 'john' when the link is clicked.
);
}
</Router>
1. nhập { BrowserRouter làm Bộ định tuyến, Tuyến đường, Liên kết, useParams } từ “Reac-router-dom”;
// Điều này nhập các thành phần từ thư viện Reac-router-dom sẽ được sử dụng trong mã này.
2.
3.
4.
5. John // Điều này tạo ra một liên kết đến /user/john tuyến đường sẽ hiển thị thành phần Người dùng với 'john' làm tham số tên người dùng khi được nhấp vào.
6. function User() { //Đây là một thành phần chức năng lấy tên người dùng làm đối số và hiển thị nó bên trong thẻ div khi được gọi bằng cách nhấp vào Liên kết phía trên nó.
7. hãy { tên người dùng } = useParams(); // Điều này sử dụng phá hủy để có quyền truy cập vào tên người dùng từ useParams().
8. trả lại (
); // Điều này trả về một phần tử div chứa bất kỳ giá trị nào được chuyển vào tên người dùng, trong trường hợp này sẽ là 'john'.
Bộ định tuyến React là gì
React Router là một thư viện định tuyến cho các ứng dụng React. Nó cung cấp các thành phần và chức năng cốt lõi cần thiết để tạo ứng dụng một trang (SPA) với điều hướng giữa các trang khác nhau. Nó cho phép các nhà phát triển xác định các tuyến đường, là các đường dẫn ánh xạ tới các thành phần cụ thể trong ứng dụng. React Router cũng cung cấp các tính năng như chuyển hướng, khớp tuyến động và tham số truy vấn.
Tham số cho URL
Các tham số cho URL trong Bộ định tuyến React cho phép nhà phát triển truyền dữ liệu động từ URL sang các thành phần React. Điều này hữu ích để tạo các tuyến động có thể được sử dụng để hiển thị các nội dung khác nhau dựa trên các tham số được truyền trong URL. Ví dụ: một tuyến đường như “/user/:id” có thể được sử dụng để hiển thị trang hồ sơ người dùng với tham số id được truyền vào URL. Các tham số cũng có thể được sử dụng để lọc dữ liệu hoặc các hoạt động khác yêu cầu dữ liệu động từ URL.
Làm cách nào để thêm tham số vào URL trong React
Việc thêm các tham số vào một URL trong React Router được thực hiện bằng cách sử dụng đối tượng “params”. Đối tượng này cho phép bạn chuyển các cặp khóa-giá trị sẽ được thêm vào URL. Để thêm một tham số, chỉ cần thêm nó vào đối tượng params như sau:
const params = {param1: 'value1', param2: 'value2' };
Sau đó, khi tạo tuyến đường của mình, bạn có thể chuyển vào đối tượng params dưới dạng đối số như sau:
Sau đó, các tham số sẽ được thêm vào URL khi điều hướng đến tuyến đường này.
