使用react-router-dom v6开发亚马逊克隆时遇TypeError: g is not a function错误求助

我在开发亚马逊克隆项目时，使用react-router-dom 6实现页面头部导航跳转，但每次使用Link组件都会抛出错误：TypeError: g is not a function。以下是头部组件的代码：

import React from 'react';
import './Header.css';
import SearchIcon from '@mui/icons-material/Search';
import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
import { Link } from "react-router-dom";

const Header = () => {
  return (
    <div className='header'>
       <Link to="/">
        <img className='header_logo' src="https://pngimg.com/uploads/amazon/amazon_PNG11.png" alt="" />
        </Link>

      <div className="header_search">
        <input className='header_searchInput'  type='text' />
         <SearchIcon className="header_searchIcon"/>
          </div>

          <div className="header_nav">
            <div className="header_option">
                <span className="header_optionlineOne">
                    hello guest
                </span>
                <span className="header_optionLineTwo">
                    Sign In
                </span>
            </div>
            <div className="header_option">
            <span className="header_optionlineOne">
                    Returns
                </span>
                <span className="header_optionLineTwo">
                    & orders
                </span>
            </div>
            <div className="header_option">
            <span className="header_optionlineOne">
                   your
                </span>
                <span className="header_optionLineTwo">
                    prime
                </span>
            </div>
           <Link to="/Checkout"> <div className="header_optionBasket" >
              <ShoppingBasketIcon/>
                <span className="header_optionLineTwo  ">
                    0
                </span>
            </div></Link>
          </div>
          </div>
  )
}

export default Header

可能的解决方案： #

• 确认路由容器包裹层级：react-router-dom v6要求所有使用Link、Routes的组件必须在BrowserRouter（或HashRouter）内部。检查你的App根组件，确保Header被路由容器包裹：

  import { BrowserRouter } from 'react-router-dom';
  import Header from './Header';
  import YourRoutes from './YourRoutes';
  
  function App() {
    return (
      <BrowserRouter>
        <Header />
        <YourRoutes />
      </BrowserRouter>
    );
  }
  

• 检查版本兼容性：确认安装的是react-router-dom v6，执行npm list react-router-dom查看版本。若版本不符，重新安装：

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

• 清理依赖缓存：如果是依赖冲突或缓存问题，执行以下步骤：

  1. 删除node_modules文件夹和package-lock.json文件
  2. 运行npm cache clean --force
  3. 重新执行npm install

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