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

Question

当我尝试从 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 };

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

Answer 1

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

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

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

删除节点模块并运行npm install

Answer 2

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

npm i react-router-dom@latest

Answer 3

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

Answer 4

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

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

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

Answer 5

但是，我还有另一个问题可以提供帮助。 我有一个钩子错误。 这是我的代码，你有什么想法吗？

错误：无效的挂钩调用。 钩子只能在 function 组件的主体内部调用。

这是我的渲染 function

 render() { let { path, url } = useRouteMatch(); const Products = this.displayProducts(); const Edition = this.displayEdition(); return ( <div className={this.state.editionProduct? 'catalog edit': 'catalog'}> <h1>Catalog</h1> <Switch> <Route exact path={`${path}/list`}> <ul className='catalog-list'> {Products} </ul> </Route> <Route path={`${path}/edit`}> <Edition saveProductHandler={this.saveProductHandler} closeEdition={this.closeEdition} product={this.state.editionProduct} /> </Route> </Switch> </div> ); }

Answer 6

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

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

Answer 7

您不能在基于类的组件中调用钩子。

渲染（）{让{路径，url}=useRouteMatch（）； ... }

Answer 8

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

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