React-Router v6类组件useNavigate传参失效及Redux状态覆盖问题

一、路由跳转传state的正确方式 #

你的navigate传参写法本身符合react-router-dom v6规范，未生效大概率是目标页面没有正确读取路由state。

1. 确认传参逻辑无问题 #

你的跳转代码是正确的：

this.props.navigate("/url_to_redirect",{
  state:{
    something:response.data
  }
});

navigate的第二个参数是配置对象，state字段会存在浏览器history栈中，不会暴露在URL上。

2. 目标页面读取state的方法 #

如果目标页面是类组件，需要通过高阶组件注入location对象来读取state：

// 先创建withLocation高阶组件
import { useLocation } from "react-router-dom";

export const withLocation = WrappedComponent => props => {
  const location = useLocation();
  return <WrappedComponent {...props} location={location} />;
};

然后在目标类组件中使用：

class TargetPage extends React.Component {
  componentDidMount() {
    // 读取路由state，加空对象避免无state时报错
    const { something } = this.props.location.state || {};
    if (something) {
      // 处理拿到的数据
    }
  }
  // ...其他逻辑
}

export default withLocation(TargetPage);

如果目标页面是函数组件，直接用useLocation钩子即可：

import { useLocation } from "react-router-dom";

function TargetPage() {
  const location = useLocation();
  const { something } = location.state || {};
  
  // ...其他逻辑
}

二、覆盖Redux全局状态的实现方案 #

路由state和Redux全局状态是两个独立的状态容器，无法直接通过路由跳转的state覆盖Redux状态，可以通过以下两种方案实现需求：

方案1：跳转前先更新Redux状态，再执行跳转 #

在触发跳转的组件中，先dispatch action更新Redux状态，再调用navigate：

// 假设你有更新目标状态的action creator
import { updateTargetState } from "../redux/actions";

// 类组件的跳转逻辑中
this.props.dispatch(updateTargetState(response.data));
this.props.navigate("/url_to_redirect");

方案2：目标页面读取路由state后，覆盖Redux状态 #

在目标页面挂载时，读取路由state，若存在则dispatch action更新Redux状态：

class TargetPage extends React.Component {
  componentDidMount() {
    const { something } = this.props.location.state || {};
    if (something) {
      // 覆盖Redux全局状态
      this.props.dispatch(updateTargetState(something));
    }
  }
}

// 注意要结合connect和withLocation高阶组件
export default withLocation(connect(mapStateToProps)(TargetPage));

这种方案能保留主组件挂载时的默认异步初始化逻辑，同时支持跳转场景下的状态覆盖，适合需要动态调整状态的场景。

是否需要重构Redux逻辑？ #

不需要重构现有Redux结构，只需要在上述环节中加入状态更新的dispatch即可。如果跳转覆盖状态的需求频繁，可以封装通用action或高阶组件简化逻辑，但无需完全重构原有逻辑。

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