# 错误：不变量失败：不应在 <Router> 外部使用 <NavLink>

- **ID:** `react/invariant-failed-you-should-not-use-navlink-outside-a-router`
- **领域:** react
- **类别:** runtime_error
- **验证级别:** ai_generated
- **修复率:** 95%

## 根因

React Router 组件（NavLink）在没有被 Router 提供者（BrowserRouter、HashRouter 等）包裹的情况下渲染，通常是由于缺少提供者组件或顺序错误。

## 版本兼容性

| 版本 | 状态 | 引入 | 弃用 |
|------|------|------|------|
| React Router 6.20.0 | active | — | — |
| React 18.2.0 | active | — | — |
| React 19.0.0 | active | — | — |

## 解决方案

1. ```
   Wrap your component tree with a Router provider at the root level (e.g., in App.js): `import { BrowserRouter } from 'react-router-dom'; function App() { return <BrowserRouter><YourComponent /></BrowserRouter>; }`
   ```
2. ```
   If using nested routers, ensure only one Router provider wraps the entire app. Remove duplicate Router components.
   ```

## 无效尝试

- **** — The error is about missing React context from Router, not DOM structure. (95% 失败率)
- **** — NavLink is part of react-router-dom; using wrong import source doesn't provide the Router context. (85% 失败率)