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

上一篇

JavaScript全解析——express

下一篇

小程序路由跳转