React组件：重定向后如何更新状态？同路由重定向警告求助

嘿，这个问题我之前也踩过坑！本质就是当用户选的下拉选项和当前页面的路由完全一致时，你还是执行了重定向操作，React Router就会抛出这个警告来提醒你——这跳转完全没必要嘛！

给你两个实用的解决思路，结合你的类组件代码来调整：

1. 先判断再跳转（最直接的方案） #

首先得确保你的UserPage组件能拿到当前路由信息：如果组件是通过<Route>直接渲染的，或者用withRouter高阶组件包裹过，props里就会自带location对象。

然后修改下拉菜单的选择事件处理函数，先对比选中路径和当前路径，只有不一样的时候才执行重定向：

class UserPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectValue: this.props.location.pathname // 把默认值设为当前路由，提升用户体验
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const selectedPath = e.target.value;
    const currentPath = this.props.location.pathname;
    
    // 只有选中路径和当前路径不同时才跳转
    if (selectedPath !== currentPath) {
      this.props.history.push(selectedPath);
      this.setState({ selectValue: selectedPath });
    }
  }

  render() {
    return (
      <select value={this.state.selectValue} onChange={this.handleChange}>
        <option value="/home">首页</option>
        <option value="/profile">个人中心</option>
        <option value="/settings">设置页面</option>
      </select>
    );
  }
}

// 如果组件没被Route包裹，记得用withRouter注入路由 props
import { withRouter } from 'react-router-dom';
export default withRouter(UserPage);

2. 优化下拉菜单默认值（辅助方案） #

把下拉菜单的默认选中值设为当前路由，这样用户打开页面时，下拉框就已经显示当前页面选项，能减少用户重复选相同选项的概率。不过这个只能做辅助，还是得加上上面的判断才稳妥——毕竟用户可能手动改URL、通过其他方式切换路由，导致下拉框选中状态和当前路由不一致。

这么修改之后，那个烦人的警告就会消失，而且逻辑也更合理，避免了不必要的页面跳转。

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