React购物车原型添加结账链接时出现错误求助

问题场景 #

我是React新手，正在开发一款购物车原型。预期功能为：点击添加按钮将商品加入购物车后，显示结账图标；点击该图标可查看所有商品。但在商品列表页面添加结账链接代码后，出现如下错误：

错误信息：/turbo_modules/react-router-dom@6.22.3/dist/umd/react-router-dom.development.js (801:7)
Cannot destructure property 'basename' of 'React__namespace.useContext(...)' as it is null.

错误原因 #

这个错误的核心是你的ProductListing组件没有被React Router的路由上下文包裹。Link组件依赖react-router-dom提供的Router上下文来获取路由配置信息（比如basename），如果组件不在BrowserRouter（或其他Router类型组件）的范围内，就会抛出这个解构失败的错误。

解决方案 #

修改你的App.js文件，确保整个应用被BrowserRouter包裹，并配置好路由规则：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProductListing from './components/ProductListing';
import CheckoutPage from './components/CheckoutPage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<ProductListing />} />
        <Route path="/checkout" element={<CheckoutPage />} />
      </Routes>
    </Router>
  );
}

export default App;

关键说明 #

• 所有使用Link、useNavigate等路由相关API的组件，必须位于Router组件的子树中，才能访问到路由上下文。
• 你当前的代码已经正确导入了Link，但缺少最外层的Router上下文提供，这是触发错误的直接原因。

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