向React Router传递prop时State is undefined问题如何解决？

DevOps 小满

2026-10-2

React Router Link传递state为undefined的解决方案

核心诱因

你为Link组件添加了target="_blank"属性触发新标签页打开。React Router的state参数是基于当前页面的会话上下文存储传递的，新开标签页会完全丢失原页面的会话状态，因此拿到的state为undefined。

对应解决办法

方案1：同标签页跳转（无需新开页面时使用）

直接移除target="_blank"属性即可正常取到state参数：

// ArticleItem.js修改后代码
<Link to="/articlePage" state={{ heading: heading }}>
  continue reading...
</Link>

原有接收代码无需调整，可直接通过location.state.heading拿到传递值。

方案2：URL参数传值（必须新开标签页时使用）

如果业务需要强制新开标签页，把参数拼到URL的query字段中传递：

修改Link跳转逻辑：

<Link 
  to={`/articlePage?heading=${encodeURIComponent(heading)}`} 
  target="_blank"
>
  continue reading...
</Link>

这里用encodeURIComponent编码是为了避免参数含特殊字符时解析出错

新页面取参逻辑调整：

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

const ArticleSoloPage = () => {
  const [searchParams] = useSearchParams();
  const heading = decodeURIComponent(searchParams.get('heading'));

  useEffect(()=>{
    console.log(heading);
  },[])
}