代码之家  ›  专栏  ›  技术社区  ›  Facundo Cabrera

意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

  •  1
  • Facundo Cabrera  · 技术社区  · 6 月前

    我遵循了一个教程: https://www.youtube.com/watch?v=R4AhvYORZRY&t 我遇到了一个问题,在哪里 <LinkContainer /> 我收到了那个错误,删除了它,修复了它,将路由器添加到应用程序或标头中,只是告诉我它已经是路由器了。

    代码为 LinkContainer ,在这里找到:

    https://www.npmjs.com/package/react-router-bootstrap?activeTab=code

    var LinkContainer = function LinkContainer(_ref) {
    var children = _ref.children,
        onClick = _ref.onClick,
        _ref$replace = _ref.replace,
        replace = _ref$replace === void 0 ? false : _ref$replace,
        to = _ref.to,
        state = _ref.state,
        _ref$activeClassName = _ref.activeClassName,
        activeClassName = _ref$activeClassName === void 0 ? 'active' : _ref$activeClassName,
        className = _ref.className,
        activeStyle = _ref.activeStyle,
        style = _ref.style,
          getIsActive = _ref.isActive,
         props = _objectWithoutProperties(_ref, _excluded);
    
      var path = _typeof(to) === 'object' ? to.pathname || '' : to;
      var navigate = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_1__.useNavigate)();
      var href = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_1__.useHref)(typeof to === 'string' ? {
       pathname: to
      } : to);
    

    main.jsx

    import { StrictMode } from "react";
    import { createRoot } from "react-dom/client";
    import {
      createBrowserRouter,
      createRoutesFromElements,
      Route,
      RouterProvider,
    } from "react-router-dom";
    import "bootstrap/dist/css/bootstrap.min.css";
    import "./index.css";
    import App from "./App.jsx";
    import HomeScreen from "./screens/HomeScreen.jsx";
    
    const router = createBrowserRouter(
      createRoutesFromElements(
        <Route path="/" element={<App />}>
          <Route index={true} path="/" element={<HomeScreen />} />
        </Route>
      )
    );
    
    createRoot(document.getElementById("root")).render(
      <StrictMode>
        <RouterProvider router={router} />
      </StrictMode>
    );
    

    app.jsx

    import Header from "./components/Header";
    import { Container } from "react-bootstrap";
    import { Outlet } from "react-router-dom";
    
    const App = () => {
      return (
        <>
          <Header />
          <Container className="my-1">
            <Outlet />
          </Container>
        </>
      );
    };
    
    export default App;
    

    Header.jsx

    import { Navbar, Nav, Container } from "react-bootstrap";
    import { FaChild, FaFileUpload, FaExchangeAlt } from "react-icons/fa";
    import { LinkContainer } from "react-router-bootstrap";
    
    const Header = () => {
      return (
        <header>
          <Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect>
            <Container>
              <LinkContainer to="/">
                <Navbar.Brand>MY APP</Navbar.Brand>
              </LinkContainer>
              <Navbar.Toggle aria-controls="basic-navbar-nav" />
              <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ms-auto">
                  <LinkContainer to="/viewKids">
                    <Nav.Link>
                      <FaChild /> Ver Niños
                    </Nav.Link>
                  </LinkContainer>
                  <LinkContainer to="/uploadKids">
                    <Nav.Link>
                      <FaFileUpload /> Subir Niño
                    </Nav.Link>
                  </LinkContainer>
                  <LinkContainer to="/updateKids">
                    <Nav.Link>
                      <FaExchangeAlt /> Actualizar Niño
                    </Nav.Link>
                  </LinkContainer>
                </Nav>
              </Navbar.Collapse>
            </Container>
          </Navbar>
        </header>
      );
    };
    
    export default Header;
    

    我尝试了很多事情,重新安装依赖项,重新启动应用程序,但似乎唯一有效的方法就是删除链接容器。我愿意接受与链接容器一样好的替代方案,但我很想知道我做错了什么。如果需要更多信息,我也愿意分享。

    1 回复  |  直到 6 月前
        1
  •  0
  •   Drew Reese    6 月前

    问题

    您遇到的问题似乎是由于使用React Router DOM版本7造成的,该版本显著改变了其内部代码结构和组织。主要问题是 RouterProvider 未通过以下方式导出 react-router-dom ,而是由根导出 react-router 图书馆。这意味着路由器没有正确实例化,尽管尚不清楚原因 那个 使用 LinkContainer 组件。

    解决方案建议

    您应该从以下位置安装和导入React Router组件 反应路由器 现在。

    1. ( 如有必要 )完全卸载任何当前安装的版本 反应路由器dom :

      npm uninstall -S react-router-dom

    2. 安装 react-router@7 对于您的UI,以及 react-router-dom@7 对于 react-bootstrap 附属国:

      npm install -S react-router@7 react-router-dom@7

    3. 导入来源 反应路由器 :

      import { StrictMode } from "react";
      import { createRoot } from "react-dom/client";
      import {
        createBrowserRouter,
        createRoutesFromElements,
        Route,
        RouterProvider,
      } from "react-router"; // <---
      import "bootstrap/dist/css/bootstrap.min.css";
      import "./index.css";
      import App from "./App.jsx";
      import HomeScreen from "./screens/HomeScreen.jsx";
      
      const router = createBrowserRouter(
        createRoutesFromElements(
          <Route path="/" element={<App />}>
            <Route index={true} path="/" element={<HomeScreen />} />
          </Route>
        )
      );
      
      createRoot(document.getElementById("root")).render(
        <StrictMode>
          <RouterProvider router={router} />
        </StrictMode>
      );
      
      import Header from "./components/Header";
      import { Container } from "react-bootstrap";
      import { Outlet } from "react-router"; // <---
      
      const App = () => {
        return (
          <>
            <Header />
            <Container className="my-1">
              <Outlet />
            </Container>
          </>
        );
      };
      
      export default App;
      

    有关从React Router v6迁移/升级到v7的具体详细信息,请参阅:

    备选方案

    当然,如果你愿意,你也可以恢复到React Router v6。

    1. ( 如有必要 )完全卸载任何当前安装的版本 反应路由器dom :

      npm卸载-S反应路由器dom

    2. 安装 react-router-dom@6 对于您的UI和 反应引导 附属国:

      npm install -S react-router-dom@

    3. 保持当前导入报表不变

    推荐文章