How to Solve TypeError: Cannot destructure property 'basename' of 'React2.useContext'
The Uncaught TypeError: “Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null” occurs in React Router when using the Link component outside the BrowserRouter. To solve the error wrap all <Link>, <Routes>, and <Route> components with the <BrowserRouter> component which is imported from ‘react-router-dom’.
The root cause and solution for the error “Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__ .useContext(...)' as it is null” are the same as the above case.
Why the error: Cannot destructure property 'basename' of 'React2.useContext(...)'
This error “Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null” happens when you are not wrapped <Link> component with the <BrowserRouter> component.
In addition to the above errors, “The above error occurred in the <Link> component: at LinkWithRef” and “useRoutes() may be used only in the context of a <Router> component.” also will show for this reason.
The solution for both errors are same, wrap all <Link>, <Routes>, and <Route> components with the <BrowserRouter> component imported from ‘react-router-dom’.
Solution for error: Cannot destructure property 'basename' of 'React2.useContext(...)'
To solve the both errors wrap the <Link>, <Routes>, and <Route> component by the <BrowserRouter/> component. Here is an example.
import React from 'react';
import {BrowserRouter, Route, Link, Routes} from 'react-router-dom';
export default function App() {
return (
<>
<BrowserRouter>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
</>
);
}
function Home() {
return <label>Home</label>;
}
function About() {
return <label>About</label>;
}
In the above example, we wrapped the all components from react-router-dom with BrowserRouter in the App component. It is fine but it is recommended to use BrowserRouter in the index,js file to wrap the App component as given below.
import React from 'react';
import ReactDOM from 'react-dom/client';
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>
<BrowserRouter>
<App/>
</BrowserRouter>
</React.StrictMode>
);
reportWebVitals();
By using BrowserRouter in the index.js file, it allows all components and hooks from React Router to use anywhere in the application. Because the index.js file is an entry file for the application.
Then our App Component can remove BrowserRouter and it will look like this:
import React from 'react';
import {Route, Link, Routes} from 'react-router-dom';
export default function App() {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</>
);
}
function Home() {
return <label>Home</label>;
}
function About() {
return <label>About</label>;
}
Conclusion
To solve the error Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null, wrap all <Link>, <Routes>, and <Route> components with the <BrowserRouter> component imported from ‘react-router-dom’. In order to use all of the components and hooks from React Router across the application, it is preferable to wrap the entire <App/> component with the BrowserRouter component.
The solution for errors “Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__ .useContext(...)' as it is null”, “The above error occurred in the <Link> component: at LinkWithRef” and “useRoutes() may be used only in the context of a <Router> component.” happening in React Router are the same as the above.
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
How to use Profiler API in React to measure render performance
What are Parameters, Arguments and Arguments Object in JavaScript
How to get window width and height in React
How to Fix - React Hook useEffect has a missing dependency
How to pass event and parameter onClick in React
How to check internet connection(online or offline) in React
Expected `onClick` listener to be a function, instead got a value of `string` type
Get the Mouse Position (coordinates) in React
We no longer support global installation of Create React App
Explore All Blogs