ReactJS使用时报TypeError: props.history.listen is not a function如何解决

你出现TypeError: props.history.listen is not a function报错的核心原因是history.js导出内容错误：当前导出的是createBrowserHistory构造函数本身，没有执行生成history实例，传给Router组件的history属性是函数而非实例对象，因此不存在listen这类实例方法。

• 首先修改history.js代码，执行createBrowserHistory生成实例后再导出：

import { createBrowserHistory } from 'history'

// 调用构造函数生成实例后导出
export default createBrowserHistory()

• 若你使用的是react-router-dom v6版本，还需要同步修改App.js的路由组件引入：
  v6版本废弃了原Router组件直接接收history属性的用法，需替换为HistoryRouter：

import React from 'react'
// 替换原Router引入
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'

import Routes from './routes'
import history from './history'

import './styles/global.scss'

function App() {
  return (
    <div className="App">
      <HistoryRouter history={history}>
        <Routes/>
      </HistoryRouter>
    </div>
  );
}

export default App;

修改完成后重启本地开发服务，报错即可解决，history相关的方法都可以正常调用。

内容的提问来源于stack exchange，提问作者João Marcos