尝试使用 React Router v6 时出错：尝试导入错误：“操作”未从“历史”导出答案

【问题标题】：Getting error when try to use React Router v6: Attempted import error: 'Action' is not exported from 'history'尝试使用 React Router v6 时出错：尝试导入错误：“操作”未从“历史”导出
【发布时间】：2020-11-14 05:02:50
【问题描述】：

我使用

创建了一个新的反应应用程序

npx create-react-app app-name

然后我将目录更改为该应用程序文件夹，然后运行以下命令。

npm install react-router@next react-router-dom@next

然后我运行了我的应用程序，它运行良好。然后我改了默认代码，使用了Routes、Route等，这里是APP代码

import React from 'react';
import {BrowserRouter as Router, Routes, Route} from "react-router-dom"

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

function Home()
{
  return <div>
        <h1>Home</h1>
    </div>
}

export default App;

我收到错误：

Attempted import error: 'Action' is not exported from 'history'.

错误的路径是：

./node_modules/react-router/index.js

知道有什么问题吗？

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

不是导入Routes组件，而是导入Switch组件... 包中没有Routes组件。

【讨论】：

不，问题是从 v6 开始，Switch 被替换为 Routes。
感谢您的宝贵时间。找到了解决方案.. :)

【解决方案2】：

我的代码没有任何问题。也许问题出在最新版本的 React-Router 上。所以，我只是更改了 React-Router 的版本。

来自

"react-router": "^6.0.0-beta.0"
"react-router-dom": "^6.0.0-beta.0"

到

"react-router": "6.0.0-alpha.2",
"react-router-dom": "6.0.0-alpha.2"

它工作得非常好，没有任何问题。我在问题中提到的相同代码无需任何更改即可正常工作。 :)

【讨论】：

【解决方案3】：

您需要安装另一个名为 history 的软件包。做npm i history。

更多信息here

【讨论】：

提供的链接将带您到 react-router 的 releases 页面，同时它确实包含有关如何安装 react-router 以及历史包的示例，在上下文中关于这个问题，可悲的是......它不包含除此之外的更多信息...... :(

【解决方案4】：

对于发现此问题的任何其他人，只要您不依赖 matchPath 导出（alpha.2 版本中似乎没有导出），@Muhammad 解决方案就可以工作。

但实际的解决方案是确保您已安装 history@^5.0.0。一旦我这样做了，“缺少Action export”错误就消失了。所以@kcsujeet 是对的，但请确保您对history 的依赖至少为5.0.0。

【讨论】：

这需要被赞成。实际问题是历史版本很可能是旧版本，需要更新。

【解决方案5】：

正如其他答案所述，这里的解决方案是安装history@^5.0.0。但是，如果您使用的是 TypeScript，您可能仍会遇到 'Action' is not exported from 'history' 错误。您需要从您的devDependencies 中删除@types/react-router/@types/react-router-dom。

在 react-router 5.x 中，类型未捆绑，因此您需要安装 @types/react-router-dom。在 6.0 预发行版中，类型已捆绑，因此您无需显式安装它们。如果你保留 5.x 类型，它们已经过时了，并且还依赖于 @types/history 4.x，这也已经过时了。

因此，如果您要在 TypeScript 项目中升级到 react-router 6.0，请删除不必要的类型。

【讨论】：

【解决方案6】：

npm i history

通过安装，您的问题将解决在旧版本的 React DOM 5 中发生的问题

【讨论】：