如何使用react router dom的Link组件实现跨页面数据传递及取值

根据你使用的React Router版本不同，获取方式分为两类：

React Router v6（当前主流版本） #

直接使用官方提供的useLocation Hook即可获取到state对象，示例代码如下：

// 先从react-router-dom导入依赖
import { useLocation } from 'react-router-dom';

function PurchasesDetail() {
  const location = useLocation();
  // 加可选链和兜底默认值，避免无state时页面报错
  const transactionId = location.state?.transactionId ?? null;

  // 后续可直接使用该ID请求详情、渲染内容等
  return <div>当前交易ID：{transactionId}</div>
}

export default PurchasesDetail;

React Router v5 #

函数组件 #

用法和v6完全一致，调用useLocation Hook获取即可。

类组件 #

需要用withRouter高阶组件包裹组件，从props中读取location对象：

import { withRouter } from 'react-router-dom';
import React from 'react';

class PurchasesDetail extends React.Component {
  render() {
    const transactionId = this.props.location.state?.transactionId ?? null;
    return <div>当前交易ID：{transactionId}</div>
  }
}

export default withRouter(PurchasesDetail);

注意：Link传递的state是存在会话内存中的，用户刷新目标页面、或者手动输入地址直接访问目标页时，state会丢失。如果需要持久化保存该ID，可将ID拼接为路由路径参数（比如/purchases-detail/:transactionId），或者存储到localStorage/sessionStorage中。

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