I am beginner with React, and I’m just trying to make a nav on my website. So i tried tu use NavLink for the navigation links, but this throw me this error :

Cannot destructure property ‘future’ of ‘react__WEBPACK_IMPORTED_MODULE_0__.useContext(…)’ as it is null.
TypeError: Cannot destructure property ‘future’ of ‘react__WEBPACK_IMPORTED_MODULE_0__.useContext(…)’ as it is null.

(I use Link on an other component and it works well)

My code

I use React with React Router, and used Create React App

This is my index.js :

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
    createBrowserRouter,
    RouterProvider,
} from "react-router-dom";

import Header from './components/Header/Header';
// Importing Pages, Components, style...

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


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <main>
            <Header />
            <RouterProvider router={router} />
        </main>
        <Footer />
    </React.StrictMode>
);

And my Header component looks like this :

import { NavLink } from 'react-router-dom';

export default function Header() {
    return (
      <header>
          <NavLink to="/">Home</NavLink>;
          <NavLink to="/about">A propos</NavLink>
      </header>
    );
}

I already looked at some solutions like the one on these pages :

• Error message “Uncaught TypeError: Cannot destructure property ‘basename’ of ‘React2.useContext(…)’ as it is null”
• React Use Context. Cannot destructure property ‘currentChatbotInEdit’ of ‘Object(…)(…)’ as it is undefined. How can I fix that?

, but I can’t solve my error and make it work.

Thank you for your help and explanations.