React Router NavLink not working

[Khalil Stark]

I was working with React router's navlink component until i got 16 errors in my console that go like this :
Uncaught TypeError: Cannot destructure property 'future' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null. 5index.js:300 The above error occurred in the <NavLink> component:

here's the code for Sidebar.tsx and App.tsx:

import React from "react";
import { HashRouter, Routes, Route } from "react-router-dom";
import Sidebar from "./components/Sidebar";
import Reservations from "./pages/Reservations";
import Rooms from "./pages/Rooms";
import Dashboard from "./pages/Dashboard";
// export interface AppProps {}

export default function App() {

  return (
    <div className="size-full bg-[#EFF4FA] flex gap-x-4 p-8">
      <div className="py-6 ">
        <Sidebar />
      </div>
      <div>
        <HashRouter>
          <Routes>
            <Route path="/" element={<Reservations/>} />
            <Route path="/rooms" element={<Rooms/>} />
            <Route path="/dashboards" element={<Dashboard/>} />
          </Routes>
        </HashRouter>
      </div>
    </div>
  );
};

import React from "react";
import { LuCalendarDays } from "react-icons/lu";
import { RiDashboard3Line } from "react-icons/ri";
import { IoSettingsOutline } from "react-icons/io5";
import { FaQuestion } from "react-icons/fa6";
import { MdBedroomChild } from "react-icons/md";
import logo from "../assets/logo.svg";
import { NavLink } from "react-router-dom";

const Sidebar: React.FC = () => {
  const icons = [
    {
      icon: <RiDashboard3Line />,
      path: "/dashboard",
    },
    {
      icon: <LuCalendarDays />,
      path: "/",
    },
    {
      icon: <MdBedroomChild />,
      path: "/rooms",
    },
    {
      icon: <IoSettingsOutline />,
      path: "/settings",
    },
  ];

  return (
    <div className="bg-black rounded-lg h-full p-5 flex flex-col justify-between items-center">
      <div className="flex flex-col gap-y-4">
        <div className="">
          <img src={logo} alt="" />
        </div>
        <div className="flex flex-col gap-y-4">
          {icons.map((icon, index) => (
            <NavLink
              key={index}
              className={({ isActive }) => (isActive ? "bg-[#4296F926] " : "")}
              to={icon.path}
            >
              {icon.icon}
            </NavLink>
          ))}
        </div>
      </div>
      <div>
        <NavLink
          className={({ isActive }) => (isActive ? "bg-[#4296F926] " : "")}
          to="/questions"
        >
          <FaQuestion />
        </NavLink>
      </div>
    </div>
  );
};

export default Sidebar;

also i tried switching between memory/hash/broswer router and nothing changed.

[Khalil Stark]

nvm just solved the issue, the NavLinks werent wrapped inside the Router, here's my fix code :

<div className="size-full bg-[#EFF4FA] flex gap-x-4 p-8 h-screen">
      <HashRouter>
        <div className="py-6 ">
          <Sidebar />
        </div>
        <Routes>
          <Route path="/" element={<Reservations />} />
          <Route path="/rooms" element={<Rooms />} />
          <Route path="/dashboards" element={<Dashboard />} />
        </Routes>
      </HashRouter>
    </div>