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.