react路由传参
推荐
在线提问>>
react路由传参
1.路由参数(params形式)
路由参数是将参数嵌入到 URL 中的一种方式。在 React Router 6 中,我们可以通过在路由路径中使用冒号来定义参数
定义
<Route path="/users/:id" element={<UserDetails />} />
获取
我们定义了一个名为 id 的参数,它可以在 URL 中的 /:id 部分找到。当用户访问 /users/123 时,123 将成为路由参数,并可以在组件中通过 useParams 钩子函数访问
function UserDetails() {
const { id } = useParams();
// ...
}
2.查询参数(search形式)
查询参数是在 URL 中使用问号传递的一种参数。在 React Router 6 中,我们可以通过在 URL 中添加查询参数来传递参数
定义
<Link to="/users?id=123">User Details</Link>
获取
我们向 /users 页面传递了一个名为 id 的查询参数,并将其设置为 123。我们可以在组件中使用 useLocation 钩子函数获取当前 URL 中的查询参数,并使用 URLSearchParams 对象来解析它们
function UserDetails() {
const searchParams = useSearchParams();
// 使用URLSearchParams这个对象解析url的search,然后直接获取id
const id = searchParams.get('id');
// ...
}
3.状态对象
状态对象是一种可以在导航期间传递数据的机制。在 React Router 6 中,我们可以在 navigate 函数中使用第二个参数来传递状态对象
定义
function handleClick() {
navigate('/users', { state: { id: 123 } });
}
获取
我们在导航到 /users 页面时传递了一个名为 id 的状态对象。我们可以在组件中使用 useLocation 钩子函数获取当前 URL 中的状态对象
function UserDetails() {
const location = useLocation();
const { id } = location.state;
// ...
}
注意
使用状态对象传递数据会将数据存储在浏览器的会话历史中,因此它仅适用于页面之间的相邻导航。如果用户从当前页面返回到其他页面,状态对象中的数据将被清除。如果需要在不同页面之间共享数据,最好使用其他的数据传递方式,如 Redux 或 Context API