React中如何在目标函数组件页面获取<Link/>组件传递的数据值

步骤1：修正组件的传参写法 #

React Router的组件传递隐式路由参数时，自定义的data字段不会生效，需要使用官方规定的state字段承载参数，修改第一页代码如下：

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

const CustomerListResults = () => {
  // 此处需确保你已经提前定义好了id变量
  return (
    <Link
      to={{
        pathname: "/app/CustomerDetails",
        state: { id: id } // 所有要传递的参数都放在state对象内
      }}
    >
      <Button
        color="primary"
        variant="contained"
      >
        Expand
      </Button>
    </Link>
  )
}

步骤2：目标页面接收参数 #

注意你的路由配置里/app/CustomerDetails对应的组件是CustomerDetails，需要确认你写的CustomerProfile就是该组件，避免挂载错误。组件内使用useLocation钩子即可获取传递的参数：

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

const CustomerDetails = () => {
  const location = useLocation();
  // 取到传递的id，加可选链?.避免刷新页面后state丢失报错
  const id = location.state?.id;
  // 后续可直接用id执行业务逻辑，比如请求用户详情接口
}

可选方案：路由参数（刷新页面参数不丢失） #

如果希望用户刷新页面后参数依然保留，可以使用显式路由参数方案，修改如下：

1. 调整路由配置：

// 把原CustomerDetails路径改为带参数的形式
{ path: 'CustomerDetails/:id', element: <CustomerDetails /> },

2. 修改第一页Link写法：

<Link to={`/app/CustomerDetails/${id}`}>
  <Button
    color="primary"
    variant="contained"
  >
    Expand
  </Button>
</Link>

3. 目标页用useParams取参数：

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

const CustomerDetails = () => {
  const { id } = useParams();
  // 此处拿到的id为字符串类型，需要数字的话可自行转换格式
}

内容的提问来源于stack exchange，提问作者motionless570