React使用react-router-dom的Link组件出现解构赋值错误求助

在React项目中使用react-router-dom的Link组件时，出现以下错误：

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

注释掉<Link>部分后错误消失，尝试使用useNavigation未成功，相关代码如下：

相关代码 #

Navbar组件 #

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;

SidebarData.js #

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"
  }
]

App.js #

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;

解决方案 #

1. 修正Router组件嵌套结构 #

Link组件必须在Router提供的上下文环境中才能正常工作，你的Header（包含Navbar）目前在Router外部，导致Link无法获取路由上下文。修改App.js，将Header移入Router内部：

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>
        <Header /> {/* 将Header移到Router内部 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/entry" element={<Entry />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

2. 恢复Link代码并测试 #

修改完嵌套结构后，取消Navbar中Link部分的注释，验证功能是否正常：

// Navbar组件中恢复Link代码
<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>
  )
})}

3. 验证react-router-dom版本（可选） #

如果上述修改后仍有问题，检查react-router-dom版本是否为v6（当前稳定版），若版本不兼容，重新安装最新版：

npm uninstall react-router-dom
npm install react-router-dom@latest

内容的提问来源于stack exchange，提问作者BeastRWA