React中使用<Link to/>传递state失效，useEffect未触发求助

1. 修复useEffect的无效逻辑 #

你当前的useEffect里连续调用两次setState，第二次setState(props.state)会直接覆盖掉前面location.state的设置，这是核心问题之一。改成根据优先级更新：

React.useEffect(() => {
  // 优先使用路由跳转带来的location.state，没有的话再回退到props.state
  if (location.state) {
    setState(location.state);
  } else if (props.state) {
    setState(props.state);
  }
}, [location.state, props.state]);

2. 检查路由跳转的组件复用问题 #

如果Modules组件本身就挂载在"/"路径下，通过Link跳转同一个路径时，React Router不会重新挂载组件，只会更新location对象。你可以在useEffect里加console.log("useEffect触发了")，确认是否真的没触发。如果确实没触发，可能是location.state和props.state都没变化，这时候可以考虑监听整个location对象：

React.useEffect(() => {
  if (location.state) {
    setState(location.state);
  } else if (props.state) {
    setState(props.state);
  }
}, [location, props.state]); // 监听整个location对象

3. 优化组件初始化逻辑 #

初始useState只在组件第一次渲染时生效，改成初始化时就优先读取location.state：

const [state, setState] = useState(() => {
  return location.state || props.state;
});

4. 验证Link与路由上下文的正确性 #

• 确认<Link>是react-router-dom导出的组件，而非自定义组件；
• 确保整个应用外层只包裹了一个BrowserRouter（或HashRouter），避免多Router导致的路由上下文隔离问题；
• 检查Link的写法：确认pathname: "/"确实是Modules组件对应的路由，state对象的键名currentComponent没有拼写错误。

5. 调试定位问题 #

在组件内添加调试日志，确认跳转时的location状态：

console.log("当前location:", location);

如果打印出来的location.state始终为null，说明Link的state根本没传过来，需要检查Link所在的组件是否处于正确的路由上下文中。

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