{
  "id": "react/invariant-failed-router-outside",
  "signature": "Error: Invariant failed: You should not use <Link> outside a <Router>",
  "signature_zh": "错误：不变式失败：你不应在 <Router> 外部使用 <Link>",
  "regex": "Invariant failed: You should not use <.*> outside a <Router>",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "A React Router component (e.g., Link, NavLink, useNavigate) is used outside of a Router context provider, typically due to missing or misordered Router wrapper in the component tree.",
  "root_cause_type": "generic",
  "root_cause_zh": "React Router 组件（例如 Link、NavLink、useNavigate）在 Router 上下文提供程序外部使用，通常是由于组件树中缺少或顺序错误的 Router 包装器。",
  "versions": [
    {
      "version": "React Router v5.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React Router v6.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 16.8+",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 18.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "Importing Router from 'react-router' instead of 'react-router-dom'.",
      "why_fails": "React Router v5+ has separate packages; the Router component is in 'react-router-dom' for web apps, and using the wrong import may not provide the correct context.",
      "fail_rate": 0.7,
      "condition": "",
      "sources": []
    },
    {
      "action": "Wrapping only the Link component with a Router, but leaving other parts of the app outside.",
      "why_fails": "The Router must wrap the entire part of the tree that uses routing; partial wrapping can cause other routing components (like useParams) to fail.",
      "fail_rate": 0.8,
      "condition": "",
      "sources": []
    },
    {
      "action": "Using BrowserRouter but forgetting to install 'react-router-dom' and relying on a global script.",
      "why_fails": "Without proper npm installation, the import may fail or resolve to a different version, leading to context mismatch.",
      "fail_rate": 0.9,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Wrap your app or the relevant component tree with a Router (e.g., BrowserRouter) at the top level. Example: import { BrowserRouter } from 'react-router-dom'; function App() { return (<BrowserRouter><YourRoutes /></BrowserRouter>); }",
      "success_rate": 0.95,
      "how": "Wrap your app or the relevant component tree with a Router (e.g., BrowserRouter) at the top level. Example: import { BrowserRouter } from 'react-router-dom'; function App() { return (<BrowserRouter><YourRoutes /></BrowserRouter>); }",
      "condition": "",
      "sources": []
    },
    {
      "action": "If using nested routes, ensure each route's component can access the router context; avoid rendering Link in a component that is not inside a Route or Router.",
      "success_rate": 0.9,
      "how": "If using nested routes, ensure each route's component can access the router context; avoid rendering Link in a component that is not inside a Route or Router.",
      "condition": "",
      "sources": []
    },
    {
      "action": "For testing, wrap components with MemoryRouter or StaticRouter to provide the routing context. Example: render(<MemoryRouter><Link to='/'>Home</Link></MemoryRouter>);",
      "success_rate": 0.85,
      "how": "For testing, wrap components with MemoryRouter or StaticRouter to provide the routing context. Example: render(<MemoryRouter><Link to='/'>Home</Link></MemoryRouter>);",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "在顶层用 Router（例如 BrowserRouter）包裹你的应用或相关组件树。示例：import { BrowserRouter } from 'react-router-dom'; function App() { return (<BrowserRouter><YourRoutes /></BrowserRouter>); }",
    "如果使用嵌套路由，确保每个路由的组件可以访问路由器上下文；避免在不在 Route 或 Router 内部的组件中渲染 Link。",
    "对于测试，用 MemoryRouter 或 StaticRouter 包裹组件以提供路由上下文。示例：render(<MemoryRouter><Link to='/'>Home</Link></MemoryRouter>);"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://reactrouter.com/en/main/router-components/browser-router",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.88,
  "fix_success_rate": 0.9,
  "resolvable": "true",
  "first_seen": "2023-06-12",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}