如何在React.js中使用Reach Router实现页面间的数据传递

以下是3种可直接落地的实现方案：

方案1：使用Link组件内置state属性传参（最常用，适合非敏感、无需持久化的数据） #

这是Reach Router原生支持的传参方式，传递的数据不会暴露在URL中：

• 跳转页写法：

import { Link } from '@reach/router'

// 组件内使用Link时，to属性传入对象格式配置
<Link 
  to={{
    pathname: '/target-page',
    state: {
      userId: 123,
      userName: '张三',
      extraInfo: { type: 'normal' }
    }
  }}
>
  跳转到目标页面
</Link>

• 目标页取值写法：

import { useLocation } from '@reach/router'

const TargetPage = () => {
  const location = useLocation()
  // 传递的数据存储在location.state中，建议做空值兼容
  const passData = location.state ?? {}
  return <div>用户名：{passData.userName}</div>
}

注意：该方式传递的数据仅在通过Link点击跳转时存在，用户手动刷新页面、或者直接输入目标地址访问时，state会变为undefined，可结合sessionStorage做降级处理。

方案2：URL路径/查询参数传参（适合公开小数据，刷新不丢失） #

适合传递id、页码等简短的公开数据，数据会直接拼接在URL中，刷新页面不会丢失：

• 路由定义（以路径参数为例）：

import { Router } from '@reach/router'
import TargetPage from './TargetPage'

<Router>
  {/* 定义路径参数占位符 */}
  <TargetPage path="/target-page/:userId" />
</Router>

• 跳转页写法：

<Link to={`/target-page/123`}>跳转到目标页面</Link>

如果用查询参数写法：<Link to={/target-page?userId=123&userName=张三}>跳转</Link>

• 目标页取值写法：

// 路径参数用useParams取值
import { useParams, useLocation } from '@reach/router'

const TargetPage = () => {
  // 取路径参数
  const { userId } = useParams()
  // 取查询参数需要自行解析location.search
  const searchParams = new URLSearchParams(useLocation().search)
  const userName = searchParams.get('userName')
  return <div>用户ID：{userId}</div>
}

方案3：全局状态管理传参（适合大体积、多页面共享的数据） #

如果传递的数据需要在多个页面复用、或者数据体积较大，可直接用全局状态存储：

• 跳转前把需要传递的数据存入全局状态（支持Context、Redux、Zustand、Mobx等任意状态管理方案）
• 跳转到目标页面后，直接从全局状态中读取对应数据即可。

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