React新手使用React Router时遇Cannot destructure property 'basename'错误求助

错误原因 #

这个错误是因为**Link组件没有被包裹在BrowserRouter内部**。Link需要从BrowserRouter提供的路由上下文中获取basename等核心属性，一旦在上下文外部使用，就会触发解构失败的错误。

代码问题排查与修正 #

你的代码存在几个关键问题：

• 包含Link的导航栏在BrowserRouter外部，无法访问路由上下文
• 直接在BrowserRouter内渲染<Employee />，会导致该组件始终显示，不受路由规则控制
• 缺少/employee路径对应的路由定义，导航点击后无法匹配到对应组件
• React中需用className替代HTML原生的class属性（规范写法）

修正后的完整代码 #

import Employee from './components/employee';
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Task from './components/task';

function App() {
  return (
    <div>
      <BrowserRouter>
        {/* 导航栏移至BrowserRouter内部，确保Link能访问路由上下文 */}
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <a className="navbar-brand" href="#">Tutusfunny</a>
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item active">
                <Link to="/employee" className="btn btn-primary">Employee</Link>
              </li>
              <li className="nav-item">
                <Link to="/task" className="btn btn-primary">Task</Link>
              </li>
            </ul>
          </div>
        </nav>

        <div className="row">
          <div className="col-md-12"></div>
          <Routes>
            {/* 补充/employee对应的路由规则 */}
            <Route path="/employee" element={<Employee />} />
            <Route path="/" element={<Employee />} />
            <Route path="/task" element={<Task />} />
          </Routes>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

核心注意事项 #

• 所有路由相关组件（Link、Routes、Route等）必须放在BrowserRouter的子层级内，确保能共享路由上下文
• 页面组件的渲染完全由Routes和Route控制，不要直接在BrowserRouter下渲染非路由控制的组件
• 确保每个Link的to属性都有对应的Route路径匹配

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