reactjs 尝试导入错误：未从"react-router-dom"中导出"useRouteMatch"

ktecyv1j 于 2022-12-26 发布在 React

关注(0)|答案(7)|浏览(280)

当我尝试从react-router-dom模块导入useRouteMatch时，我遇到了这个错误：
尝试导入错误：未从"react-router-domain"中导出"useRouteMatch"。
我有一个错误版本的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 };

请帮助，我需要你的大脑：）

reactjs

来源：https://stackoverflow.com/questions/58399859/attempted-import-error-useroutematch-is-not-exported-from-react-router-dom

7条答案

按热度按时间

zengzsys1#

如果从v5升级到v6，请按照升级指南将useRouteMatch替换为useMatch ...
https://reactrouter.com/docs/en/v6/upgrading/v5#replace-useroutematch-with-usematch

赞(0）回复(0）举报 2022-12-26

roejwanj2#

我有同样的问题，对我来说，我只需要更新版本的React路由器，我正在使用。
useRouteMatch随React路由器V5.1添加https://reacttraining.com/blog/react-router-v5-1/#useroutematch
将package.json更新为"react-router-dom": "^5.1.2",
删除节点模块并运行npm install

赞(0）回复(0）举报 2022-12-26

zsbz8rwp3#

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

npm i react-router-dom@latest

赞(0）回复(0）举报 2022-12-26

66bbxpm54#

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

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

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

赞(0）回复(0）举报 2022-12-26

r1wp621o5#

检查react-router-dom版本是否兼容或高于“5.1”，以便您可以使用useRouteMatch()、useHistory()等钩子。

赞(0）回复(0）举报 2022-12-26

gopyfrb36#

对于任何因为试图实现'useRouteMatch'来在子组件中嵌套路由而发现这个线程的人来说，简短的答案是，React路由器在v6.6.0中进行了更新，值得一提。
阅读此处：https://reactrouter.com/en/6.6.0/upgrading/v5#relative-routes-and-links
布线路径现在是相对的，这意味着它会自动隐含在子元件的布线代号中：

import React from 'react';
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';

function App() {
    return (
      <div>
        <h1>Marine Mammals</h1>
        <BrowserRouter>
          <Routes>
              <Route path='/whale/*' element={<Whale />} />
          </Routes>        
        </BrowserRouter>
      </div>
    );
  }

function Whale() {

  return (
    <>
      <h2>Whale</h2>
      <Routes>
        <Route path='beluga' element={<Beluga />} />
        <Route path='blue' element={<Blue />} />
      </Routes>
    </>
  );
}

在App（）中，在whale的路径中添加了一个星号，如下所示：“鲸/"。
在Whale（）中，除了替换“”之外，我们不再需要添加任何内容，如下所示：路径=“蓝色”
源代码来自DigitalOcean的一个教程（这是一个很好的教程，但过时了）：https://www.digitalocean.com/community/tutorials/how-to-handle-routing-in-react-apps-with-react-router

赞(0）回复(0）举报 2022-12-26

wz3gfoph7#

钩子不能在类组件内部使用。你应该重构你的代码以使其具有功能。使用useState和useEffect钩子，你仍然能够利用组件级状态和组件生命周期。
如果没有该组件的完整代码，我就无法对您的示例执行此操作。

赞(0）回复(0）举报 2022-12-26