尝试导入错误：“useRouteMatch”未从“react-router-dom”导出

Posted 2023-02-21

【中文标题】尝试导入错误：“useRouteMatch”未从“react-router-dom”导出

【英文标题】：Attempted import error: 'useRouteMatch' is not exported from 'react-router-dom'

【发布时间】：2020-02-12 10:34:49

【问题描述】：

当我尝试从 react-router-dom 模块导入 useRouteMatch 时出现此错误，出现此错误：

尝试导入错误：“useRouteMatch”未从 'react-router-dom'。

我的 react-router-dom 模块版本是否错误？

import 
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useRouteMatch,
    useParams
 from "react-router-dom";

我查看了模块的导出，实际上它没有导出。是不是我的版本不对？

import _BrowserRouter from "./BrowserRouter";
export  _BrowserRouter as BrowserRouter ;
import _HashRouter from "./HashRouter";
export  _HashRouter as HashRouter ;
import _Link from "./Link";
export  _Link as Link ;
import _MemoryRouter from "./MemoryRouter";
export  _MemoryRouter as MemoryRouter ;
import _NavLink from "./NavLink";
export  _NavLink as NavLink ;
import _Prompt from "./Prompt";
export  _Prompt as Prompt ;
import _Redirect from "./Redirect";
export  _Redirect as Redirect ;
import _Route from "./Route";
export  _Route as Route ;
import _Router from "./Router";
export  _Router as Router ;
import _StaticRouter from "./StaticRouter";
export  _StaticRouter as StaticRouter ;
import _Switch from "./Switch";
export  _Switch as Switch ;
import _generatePath from "./generatePath";
export  _generatePath as generatePath ;
import _matchPath from "./matchPath";
export  _matchPath as matchPath ;
import _withRouter from "./withRouter";
export  _withRouter as withRouter ;

请帮忙，我需要你的大脑:)

【问题讨论】：

你能接受我最初的回答吗，因为那是在帖子中回答你问题的那个。谢谢:)

【参考方案1】：

我遇到了同样的问题，对我来说，我只需要更新我正在使用的 react-router 的版本。

useRouteMatch 被添加到 react-router V5.1 https://reacttraining.com/blog/react-router-v5-1/#useroutematch

将您的 package.json 更新为 "react-router-dom": "^5.1.2",

删除节点模块并运行npm install

【讨论】：

谢谢，我在想，我有 React Router V5，只需要获取最新版本：npm i react-router-dom@latest 即可获取最新版本。

还将 react-router 更新到相同版本，否则您可能会收到此错误 > 错误：不变失败：您不应该在 之外使用 gist.github.com/StringEpsilon/88c7b049c891425232aaf88e7c882e05 向您展示如何诊断此错误。我的情况是忘记将 react-router 更新到相同的版本。

如果你使用 typescript，需要更新 @types 以及 yarn upgrade @types/react-router-dom 到 ^5.1.2

嗯，我只安装了 react-router-dom 没有指定版本，但我看到它安装了旧版本 4.3.1。为什么会这样？

【参考方案2】：

钩子不能在类组件内部使用。您应该重构代码以使其正常工作。使用 useState 和 useEffect 挂钩，您仍然可以利用组件级状态和组件生命周期。

如果没有该组件的完整代码，我无法使用您的示例执行此操作。

【参考方案3】：

检查react-router-dom 版本应该兼容或大于“5.1”，以便您可以使用一些钩子，如useRouteMatch()、useHistory()..

【参考方案4】：

只需将您的 react-router-dom 版本更新到最新版本。

npm i react-router-dom@latest

【参考方案5】：

我解决了将react-router-dom 更新到高于 5.1 的版本

npm install react-router-dom@5.1.2 --save

不要忘记使用npm start 再次启动应用程序以查看更改。

【参考方案6】：

如果从 v5 升级到 v6，请按照升级指南将 useRouteMatch 替换为 useMatch...

https://reactrouter.com/docs/en/v6/upgrading/v5#replace-useroutematch-with-usematch

【讨论】：

谢谢。这就是为我解决的问题。