Right side of assignment cannot be destructured which using Link component from 'react-router-dom' in react js

Question

This is my code

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { SidebarData }  from './SidebarData';
import { LuMenu } from "react-icons/lu";
import { RxCross2 } from "react-icons/rx";

function Navbar() {
  const [sidebar, setSidebar] = useState(false)

  const showSidebar = () => setSidebar(!sidebar)

  return (
    <>
      <div className='navbar'>
        <Link to="#" className='menu-bars'>
          <h1><LuMenu onClick={showSidebar}/> </h1>
        </Link> 
      </div>
      <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
        <ul className="nav-menu-items" onClick={showSidebar}>
          <li className='navbar-toggle'>
            {/* <Link to="#" className='menu-bars'>
              <RxCross2 />
            </Link> */}
          </li>
          {SidebarData.map((item, index) => {
            return (
              <li key={index} className={item.cName}>
                {/* <Link to={item.path}>
                  {item.icon}
                  <span>{item.title}</span>
                </Link> */}
              </li>
            )
          })}
        </ul>
      </nav>
    </>
  )
}

export default Navbar;

import React from 'react';
import { AiFillHome } from "react-icons/ai";
import { LuPencilLine } from "react-icons/lu";

export const SidebarData = [
  {
    title: "Home",
    path: "/",
    icon: <AiFillHome />,
    cName: "nav-text"
  },
  {
    title: "Entry",
    path: "/entry",
    icon: <LuPencilLine />,
    cName: "nav-text"
  }
]

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Entry from './pages/Entry';
import Header from './components/Header';

function App() {
  return (
    <div className="App">
      <Header />
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/entry" element={<Entry />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

This is the error that I am getting.

[Error] TypeError: Right side of assignment cannot be destructured
    LinkWithRef (bundle.js:37906)
    renderWithHooks (bundle.js:24762)
    updateForwardRef (bundle.js:27331)
    callCallback (bundle.js:14358)
    dispatchEvent
    invokeGuardedCallbackDev (bundle.js:14402)
    invokeGuardedCallback (bundle.js:14459)
    beginWork$1 (bundle.js:34323)
    performUnitOfWork (bundle.js:33571)
    workLoopSync (bundle.js:33494)
    renderRootSync (bundle.js:33467)
    performConcurrentWorkOnRoot (bundle.js:32862:93)
    workLoop (bundle.js:43931)
    flushWork (bundle.js:43909)
    performWorkUntilDeadline (bundle.js:44146)

[Error] The above error occurred in the <Link> component:

LinkWithRef@http://localhost:3000/static/js/bundle.js:37893:14
div
Navbar@http://localhost:3000/static/js/bundle.js:249:80
div
div
Header
div
App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
    logCapturedError (bundle.js:26865)
    (anonymous function) (bundle.js:26890)
    callCallback (bundle.js:22796)
    commitUpdateQueue (bundle.js:22814)
    commitLayoutEffectOnFiber (bundle.js:30860)
    commitLayoutMountEffects_complete (bundle.js:31953)
    commitLayoutEffects_begin (bundle.js:31942)
    commitLayoutEffects (bundle.js:31888)
    commitRootImpl (bundle.js:33797)
    commitRoot (bundle.js:33677)
    finishConcurrentRender (bundle.js:32997)
    performConcurrentWorkOnRoot (bundle.js:32925)
    workLoop (bundle.js:43931)
    flushWork (bundle.js:43909)
    performWorkUntilDeadline (bundle.js:44146)

I am observed that when I am commenting the <Link> part from the code I do not get the error, but else I get error mentioned above, am I doing something wrong?

I haven't found my error any where so I am posting this, I tried using useNavigation, but I could not implement it.

Answer 1

Render the Header component, and Link components by extension, inside the router component that provides the routing context the Link components (and all other React-Router-DOM components and hooks) need in order to function.

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Entry from './pages/Entry';
import Header from './components/Header';

function App() {
  return (
    <div className="App">
      <Router>     // <-- provides routing context to sub-ReactTree
        <Header /> // <-- inside router, can access routing context now 
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/entry" element={<Entry />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;