React Router Link传递的state在新标签页打开时无法获取如何解决

React Router 中Link组件传递的state是存储在当前页面的history会话栈内存中的，仅在当前标签页的路由会话生命周期内有效。新标签页打开链接时会创建全新的浏览器会话与history实例，原页面的内存状态不会同步到新标签页，因此props.location.state会返回undefined，这是框架的正常设计逻辑。

方案1：将参数放到URL查询参数中（最推荐） #

这是兼容性最高的实现方式，适合绝大多数场景：

1. 修改Link组件写法：

<Link to={{pathname:"/open-page", search: "?key=hello"}}/>
// 简化写法
<Link to="/open-page?key=hello"/>

2. 目标页面取值：
   如果是React Router v5版本，可配合qs库解析查询参数：

import qs from 'qs';

export const OpenPageComponent = props => {
  const query = qs.parse(props.location.search, { ignoreQueryPrefix: true });
  console.log('key', query.key); // 输出 hello
  // 原有逻辑
}

如果是React Router v6版本，可使用内置的useSearchParams钩子：

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

export const OpenPageComponent = props => {
  const [searchParams] = useSearchParams();
  const key = searchParams.get('key');
  console.log('key', key); // 输出 hello
  // 原有逻辑
}

• 优点：实现简单，无额外依赖，兼容性拉满
• 缺点：参数会暴露在URL中，不适合传递敏感数据，参数长度受浏览器URL最大长度限制

方案2：使用本地存储持久化参数 #

适合不想暴露参数在URL的场景：

1. 跳转前把参数存入localStorage：

<Link 
  to="/open-page" 
  onClick={() => localStorage.setItem('openPageParams', JSON.stringify({key: 'hello'}))}
  target="_blank"
/>

2. 目标页面取值后立即清除存储，避免数据污染：

export const OpenPageComponent = props => {
  const state = JSON.parse(localStorage.getItem('openPageParams') || '{}');
  localStorage.removeItem('openPageParams');
  console.log('state', state.key); // 输出 hello
  // 原有逻辑
}

• 优点：参数不暴露在URL中，可传递的数据量更大
• 缺点：同时打开多个新标签页可能出现参数覆盖问题，不可存储敏感数据

方案3：通过全局状态管理传递参数 #

如果项目已经接入Redux、MobX等全局状态管理工具，可以直接把参数存入全局store，目标页面从store中取值即可。

• 优点：状态可控，适合传递大量复杂参数
• 缺点：需要额外编写状态管理代码，轻量项目没必要引入额外复杂度

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