react-router-dom封装NavBar组件触发useHref()需在Router上下文报错

该错误核心是react-router-dom提供的Link组件内部依赖useHref钩子，该钩子必须在<Router>组件包裹的上下文范围内才能正常调用，只要脱离Router上下文调用路由相关API就会抛出这个错误。
从你提供的代码看，理论上NavBar已经放在Router内部，不应该报错，出现问题的常见原因有以下几种：

• 入口文件（通常是src/index.js）没有渲染你写的RouterConfig组件，而是单独渲染了NavBar组件，导致NavBar没有被Router包裹
• 项目依赖安装异常，存在多个版本的react-router-dom，导致上下文不一致
• 你使用的v6.0.0-beta.6属于早期测试版本，存在已知的上下文识别bug，且语法和后续正式版不兼容

1. 检查入口文件渲染逻辑 #

打开你的src/index.js文件，确认最终渲染的是RouterConfig组件，正确写法参考：

import React from 'react';
import ReactDOM from 'react-dom';
import { RouterConfig } from './你存放RouterConfig的文件路径';

ReactDOM.render(
  <React.StrictMode>
    <RouterConfig />
  </React.StrictMode>,
  document.getElementById('root')
);

不要单独渲染NavBar组件，确保所有用到Link、useNavigate等路由能力的组件，最终父级都包裹在同一个Router组件内。

2. 修复版本语法兼容问题 #

建议先升级到react-router-dom v6稳定版，避免测试版本身bug，同时修改路由配置为符合正式版的语法规则：

• 执行命令更新依赖：
  npm install react-router-dom@latest
• 修改RouterConfig组件代码：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

// 引入组件
import { Home } from "./Components/Home/Home";
import { About } from "./Components/About/About";
import { Products } from "./Components/Products/Products";
import { ProductItems } from "./Components/ProductItems/ProductItems";
import  {NavBar}  from "./Components/NavBar/NavBar";
import { Fotter } from "./Components/Fotter/Fotter";

export const RouterConfig = () => {
  return (
    <Router>
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/product" element={<Products />} />
        <Route path="/product/:id" element={<ProductItems />} />
        <Route path="*" element={<h2>404 Not Found </h2>} />
      </Routes>
      <Fotter />
    </Router>
  );
};

3. 清理依赖缓存 #

如果修改后还是报错，执行以下命令清理缓存重装依赖，解决多版本依赖冲突问题：

rm -rf node_modules package-lock.json
npm install

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