当前位置：首页 > React

react中link传值如何获取

2026-01-26 01:16:20React

在 React 中通过 `Link` 传值并获取

在 React 应用中，Link 组件通常用于导航，传值方式主要有两种：URL 参数（params）和查询参数（query）。以下是具体实现方法：

通过 URL 参数传值

使用动态路由（如 React Router v6）传递参数，目标页面通过 useParams 获取。

传递参数：

import { Link } from 'react-router-dom';

<Link to="/user/123">用户详情</Link>

路由需配置动态参数：

<Route path="/user/:id" element={<UserPage />} />

获取参数：

react中link传值如何获取

import { useParams } from 'react-router-dom';

function UserPage() {
  const { id } = useParams();
  return <div>用户ID: {id}</div>;
}

通过查询参数传值

使用 URLSearchParams 或 useLocation 解析查询字符串。

传递参数：

<Link to="/user?name=John&age=25">用户信息</Link>

获取参数：

react中link传值如何获取

import { useLocation } from 'react-router-dom';

function UserPage() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const name = searchParams.get('name');
  const age = searchParams.get('age');

  return <div>姓名: {name}, 年龄: {age}</div>;
}

通过 `state` 属性传值

通过 Link 的 state 传递对象，目标页面用 useLocation 获取。

传递参数：

<Link 
  to="/user" 
  state={{ name: 'John', age: 25 }}
>
  用户信息
</Link>

获取参数：

import { useLocation } from 'react-router-dom';

function UserPage() {
  const { state } = useLocation();
  return <div>姓名: {state.name}, 年龄: {state.age}</div>;
}