I am fairly new to React and I am facing this problem. I am using NPM version: 10.4.0 and NodeJs Version: 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.

I am trying to use Link tag in Navbar ponent

Index.js

import React from "react";
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 "./ponents/Navbar";
import "./App.css";
import TextForm from "./ponents/TextForm";
import Alert from "./ponents/alert";
import { useState } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import About from "./ponents/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" };

and this is the plete error:

Is there anything that I need to add in my Index.js to resolve this issue or is there a problem in the logic that I am using.

I am fairly new to React and I am facing this problem. I am using NPM version: 10.4.0 and NodeJs Version: 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.

I am trying to use Link tag in Navbar ponent

Index.js

import React from "react";
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 "./ponents/Navbar";
import "./App.css";
import TextForm from "./ponents/TextForm";
import Alert from "./ponents/alert";
import { useState } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import About from "./ponents/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" };

and this is the plete error:

Is there anything that I need to add in my Index.js to resolve this issue or is there a problem in the logic that I am using.

• javascript
• reactjs
• react-router
• react-router-dom

4 Answers 4

React Project: Wrap your App by BrowserRouter. That is, your index file shall be:

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

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')  
)

Gatsby Project: Check your link import. It shall be: import {Link} from 'gatsby';

and not: import {Link} from "react-router-dom";

The Navbar, and Link ponents specifically, are rendered outside the router context provided by RouterProvider.

Navbar should be rendered within RouterProvider. You can create a layout route ponent that renders Navbar and an Outlet for the nested routes.

You will want to also move the router declaration outside the App ponent on its own so it is not redeclared each time App rerenders, e.g. to provide a stable router reference to RouterProvider.

Example:

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

const AppLayout = () => (
  <>
    <Navbar title="Website" about="About" />
    <Outlet />
  </>
);

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

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

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

  return (
    <>
      <Alert alert={alert} />
      <div className="container">
        <RouterProvider router={router} />
      </div>
    </>
  );
}

The issue is the BrowserRouter needs to be at the root level of the Application. Instead of createBrowserRouter use BrowserRouter Component. Refer

//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;

function App() {
  return (
    <>
      <BrowserRouter>
        <NavBar />
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/cart' element={<Cart />} />
          <Route path='/product' element={<Product />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

Use Tag, in latest version, this tag is in use, and Put inside this Tag, The problem will solve.