我正在按照一个教程： 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>
);

应用程序.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;

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