{
  "id": "react/invariant-failed-you-should-not-use-navlink-outside-a-router",
  "signature": "Error: Invariant failed: You should not use <NavLink> outside a <Router>",
  "signature_zh": "错误：不变量失败：不应在 <Router> 外部使用 <NavLink>",
  "regex": "Error: Invariant failed: You should not use <NavLink> outside a <Router>",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "A React Router component (NavLink) is rendered without being wrapped in a Router provider (BrowserRouter, HashRouter, etc.), typically due to missing or misordered provider components.",
  "root_cause_type": "generic",
  "root_cause_zh": "React Router 组件（NavLink）在没有被 Router 提供者（BrowserRouter、HashRouter 等）包裹的情况下渲染，通常是由于缺少提供者组件或顺序错误。",
  "versions": [
    {
      "version": "React Router 6.20.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 19.0.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "The error is about missing React context from Router, not DOM structure.",
      "fail_rate": 0.95,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "NavLink is part of react-router-dom; using wrong import source doesn't provide the Router context.",
      "fail_rate": 0.85,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "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>; }`",
      "success_rate": 0.95,
      "how": "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>; }`",
      "condition": "",
      "sources": []
    },
    {
      "action": "If using nested routers, ensure only one Router provider wraps the entire app. Remove duplicate Router components.",
      "success_rate": 0.9,
      "how": "If using nested routers, ensure only one Router provider wraps the entire app. Remove duplicate Router components.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "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>; }`",
    "If using nested routers, ensure only one Router provider wraps the entire app. Remove duplicate Router components."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://reactrouter.com/en/main/components/nav-link",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.88,
  "fix_success_rate": 0.95,
  "resolvable": "true",
  "first_seen": "2023-11-20",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}