Fixing "Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null"

This common error in React applications occurs when using react-router-dom components like Link outside the context of a BrowserRouter. Let’s understand why this happens and how to fix it.

The Problem

When you use the Link component from react-router-dom without wrapping your application inside a BrowserRouter, you might encounter the following error:

Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null.

This happens because Link relies on the RouterContext provided by the BrowserRouter. If your app is not wrapped in a BrowserRouter, useContext returns null, causing this error.

Example Code Triggering the Error

import React from 'react'
import { Link } from 'react-router-dom'

const Navbar = () => {
  return (
    <nav>
      <Link to="/">Home</Link>
    </nav>
  )
}

export default Navbar

If the Navbar component is rendered outside a BrowserRouter, the above error will occur.

Solutions

1. Wrap Your App with BrowserRouter

Ensure your entire app is wrapped in a BrowserRouter component. Typically, this is done in your index.js file.

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

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

By wrapping your app with BrowserRouter, Link and other routing components can access the RouterContext they depend on.

2. Move Components Inside BrowserRouter

Ensure any components using Link, useLocation, useNavigate, or useParams are nested within a BrowserRouter. For example:

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Navbar from './Navbar'
import Home from './Home'
import About from './About'

const App = () => {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

This ensures that the Navbar component and its Link elements have access to the RouterContext.

3. Verify Your Router Type

If your app uses createBrowserRouter from [email protected]+, ensure your routes are correctly configured. For example:

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
])

const App = () => {
  return <RouterProvider router={router} />
}

export default App

If using createBrowserRouter, Link will work as expected without needing BrowserRouter.

FAQ

1. Why does Link require BrowserRouter?

Link relies on the RouterContext provided by BrowserRouter to determine the current route and navigation logic.

2. What if I forget to wrap my app in BrowserRouter?

Components like Link and useNavigate will fail because they cannot access routing information. Always ensure BrowserRouter wraps the root of your app.

3. Can I use HashRouter instead of BrowserRouter?

Yes, HashRouter can be used if you prefer hash-based URLs (e.g., example.com/#/about). Just replace BrowserRouter with HashRouter in your code.