未指望的应用程序错误！ usenavigate（）只能在<Router>组件的上下文中使用 我正在遵循一个教程： https://www.youtube.com/watch?v=r4ahvyorzry&t 我遇到了一个问题，在那儿，

Question

LinkContainer的代码，在此处找到： https：//www.npmjs.com/package/reaeact-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;

我尝试了很多事情，重新安装依赖项，重新启动应用程序，但是唯一起作用的是删除链接容器...我愿意接受与链接容器一样好的替代方案...但是ID Love Love要回答我在做什么错。如果需要的话，我也愿意分享。

IT似乎是您使用的问题是使用React-Router-Dom版本7引起的，该版本显着改变了其内部代码结构和组织。主要问题是

RouterProvider

没有被

react-router-dom

导出，而是由root

Answer 1

库导出。 您现在应该从现在安装和导入React-Router组件。

（如果必要的

）完全卸载了任何当前安装的版本

react-router

：

react-router-dom

1. 安装

   npm uninstall -S react-router-dom为您的ui，react-router@7

   为

   react-router-dom@7
   依赖性：
   react-bootstrap

2. 有关从React-Router V6迁移/升级到V7的特定详细信息，请参见：

   eDeprecations：

   https：//reactrouter.com/upgrading/v6#deprecations

   upgradeto v7：

   https：//reactrouter.com/upgrading/v6#upgrade-to-v7