将Bootstrap Header组件转React时报不可在Router外使用NavLink错误

云原生阿岚

2026-8-30

报错原因

react-router-dom 提供的 NavLink、Switch、Route 等所有路由相关组件，都依赖上层Router组件注入的路由上下文才能正常工作，必须被包裹在<BrowserRouter>/<HashRouter>这类路由容器组件内部使用。
你的代码中全程没有引入和挂载Router组件，直接在App里渲染了带NavLink的Header、以及Switch/Route组件，所有路由相关组件都处于Router上下文外部，因此抛出该错误。
另外你的代码还存在一个隐藏问题：Header中NavLink配置的跳转路径是/Shop（首字母大写），但Route中配置的匹配路径是/shop（全小写），路径大小写不一致会导致后续路由匹配失败。

修复方法

第一步：引入路由容器包裹整个应用
推荐在项目入口文件（通常是src/index.js）中引入BrowserRouter（history模式路由，最常用），把根组件App包裹起来，示例代码如下：
```
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <App />
  </Router>
);
```
如果你不想改index.js，也可以直接在App.js中引入Router，把App内部的所有内容包裹起来，效果一致。
第二步：修正路径大小写问题
找到Header.js中所有NavLink的to属性，把to='/Shop'修改为to='/shop'，和Route中配置的路径保持完全一致，避免路由匹配失效。