路由参数(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

上一篇

高阶组件的使用场景有哪些？

下一篇

为什么redux中要使用不可变数据