无法解构“react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)”的属性“basename”，因为它为空。使用链接标签时出现此错误

Question

我对 React 相当陌生，我正面临这个问题。 我正在使用 NPM 版本：10.4.0 和 NodeJs 版本：v20.11.0

 Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.

TypeError: Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.

我正在尝试在导航栏组件中使用链接标签

这是我的 Index.js

import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

这是我的App.js

// import logo from "./logo.svg";
import Navbar from "./components/Navbar";
import "./App.css";
import TextForm from "./components/TextForm";
import Alert from "./components/alert";
import { useState } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import About from "./components/about";

function App() {
  const [alert, setAlert] = useState(null);

  const showAlert = (message, type) => {
    setAlert({
      alert: message,
      type: type,
    });
    setTimeout(() => {
      setAlert(null);
    }, 1500);
  };

  const Router = createBrowserRouter([
    {
      path: "/",
      element: (
        <TextForm alert={showAlert} heading="Enter your Text to analyze" />
      ),
    },
    { path: "/about", element: <About /> },
  ]);

  return (
    <>
      <Navbar title="Website" about="About" />
      <Alert alert={alert} />
      <div className="container">
        <RouterProvider router={Router} />
      </div>
    </>
  );
}

export default App;

这是我的 Navbar.js

import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";

export default function Navbar(props) {
  return (
    <>
      <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
        <div className="container-fluid">
          <a className="navbar-brand" href="/">
            {props.title}
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown"
            aria-expanded="false"
            aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNavDropdown">
            <ul className="navbar-nav">
              <li className="nav-item">
                <Link
                  className="nav-link active"
                  aria-current="page"
                  to="/about">
                  about
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </>
  );
}

// Setting the type of the props
Navbar.propTypes = {
  title: PropTypes.string,
  about: PropTypes.string.isRequired,
};
// setting the default value of the props
Navbar.defaultProps = { title: "Default Title", about: "Default About" };

这是完整的错误：

我需要在 Index.js 中添加任何内容来解决此问题，还是我使用的逻辑存在问题。

Answer 1

问题是

BrowserRouter

需要位于应用程序的

root

级别。使用

createBrowserRouter

组件代替

BrowserRouter

。 参考

//Your imports

function App() {
  // Rest of your Code

  // Remove createBrowserRouter instead use BrowserRouter Component

  return (
    <>
      <BrowserRouter>
         <Navbar title="Website" about="About" />
         <Alert alert={alert} />
         <Routes>
            <Route path="/" element={<TextForm alert={showAlert} heading="Enter your Text to analyze" />} />
            <Route path="/about" element={<About />} />
         </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;