如何解决NavTop组件中this.props.history未定义的路由跳转问题？

嘿，我太懂这种困扰了！之前做项目的时候也碰到过一模一样的情况——明明想优雅地用history.push跳转，结果报错说history是undefined，只能无奈用window.location.href凑活。其实问题根源很简单：你的NavTop组件没有接收到路由相关的history props，通常是因为它不是直接被React Router的路由组件渲染的。下面给你几个实用的解决方案：

方案一：用withRouter高阶组件（React Router v5及以下适用） #

这是最经典的解决办法，withRouter会把路由的核心props（history、location、match）注入到你的组件里，不管它是不是嵌套在路由组件下面。

修改你的代码如下：

// 先导入withRouter
import { withRouter } from 'react-router-dom';

class NavTop extends Component{ 
  doLogout(){ 
    _user.logout().then((res) => { 
      // 现在this.props.history就可以正常使用了
      this.props.history.push('/login') 
    }) 
  } 
}

// 导出组件时用withRouter包裹
export default withRouter(NavTop);

这样处理后，组件就能拿到history对象，调用push方法就能实现无刷新的平滑跳转了。

方案二：使用useNavigate钩子（React Router v6+适用） #

如果你的项目用的是React Router v6，withRouter已经被移除了，这时候推荐用函数组件配合useNavigate钩子。如果不想把类组件改成函数组件，也可以自己封装一个简单的HOC来传递导航方法，不过直接转函数组件更简洁：

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

function NavTop() {
  // 获取navigate方法
  const navigate = useNavigate();

  const doLogout = () => {
    _user.logout().then((res) => {
      // 用navigate实现跳转
      navigate('/login');
    });
  };

  // 这里写你的组件渲染逻辑
  return (
    // ...你的导航栏JSX
  );
}

export default NavTop;

方案三：确保组件被Route直接渲染（局限性较大） #

如果你的NavTop是某个路由页面的一部分，可以直接把它作为Route的component（v5）或element（v6）属性，这样组件会自动接收路由props：

// React Router v5
<Route path="/dashboard" component={NavTop} />

// React Router v6
<Route path="/dashboard" element={<NavTop />} />

不过这个方法只适用于组件是路由页面的情况，像全局导航栏这种不会绑定到特定路由的组件，还是前两个方案更合适。

最后再啰嗦一句：window.location.href之所以“粗暴”，是因为它会强制刷新整个页面，丢失当前应用的状态，而history.push是单页应用的路由跳转，只会更新页面视图，不会重新加载整个应用，体验好太多啦！

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