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:
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.
2
Answers
The issue is the
BrowserRouter
needs to be at theroot
level of the Application. Instead ofcreateBrowserRouter
useBrowserRouter
Component. ReferThe
Navbar
, andLink
components specifically, are rendered outside the router context provided byRouterProvider
.Navbar
should be rendered withinRouterProvider
. You can create a layout route component that rendersNavbar
and anOutlet
for the nested routes.You will want to also move the
router
declaration outside theApp
component on its own so it is not redeclared each timeApp
rerenders, e.g. to provide a stablerouter
reference toRouterProvider
.Example: