使用react js中'react-router-dom'中的Link组件无法解构赋值的右侧

Question

这是我的代码

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;

这是我遇到的错误。

[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)

我观察到，当我评论代码中的部分时，我没有收到错误，但是我收到上面提到的错误，我做错了什么吗

我在任何地方都没有发现我的错误，所以我发布了这个，我尝试使用 useNavigation，但我无法实现它

Answer 1

渲染

Header

组件，以及扩展的

Link

组件，inside 路由器组件，提供

Link

组件（以及所有其他 React-Router-DOM 组件和钩子）所需的路由上下文为了发挥作用。

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;