Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(…)' as it is null. Getting this error while using link tag

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 component

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 "./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" };

and this is the complete error:
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.

Tags:

2

Answers


  1. 0

    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;
    Login or Signup to reply.
  2. 0

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

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

    You will want to also move the router declaration outside the App component 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 "./components/Navbar";
import "./App.css";
import TextForm from "./components/TextForm";
import Alert from "./components/alert";
import About from "./components/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>
    </>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search