react runtime_error ai_generated true

Error: Invariant failed: You should not use <Link> outside a <Router>

ID: react/invariant-failed-router-outside

Also available as: JSON · Markdown · 中文
90%Fix Rate
88%Confidence
1Evidence
2023-06-12First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React Router v5.x active — — —
React Router v6.x active — — —
React 16.8+ active — — —
React 18.x active — — —

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.

generic

中文

React Router 组件（例如 Link、NavLink、useNavigate）在 Router 上下文提供程序外部使用，通常是由于组件树中缺少或顺序错误的 Router 包装器。

Official Documentation

https://reactrouter.com/en/main/router-components/browser-router

Workarounds

  1. 95% success 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>); } 
    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>); }
  2. 90% success 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. 
    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.
  3. 85% success For testing, wrap components with MemoryRouter or StaticRouter to provide the routing context. Example: render(<MemoryRouter><Link to='/'>Home</Link></MemoryRouter>); 
    For testing, wrap components with MemoryRouter or StaticRouter to provide the routing context. Example: render(<MemoryRouter><Link to='/'>Home</Link></MemoryRouter>);

中文步骤

  1. 在顶层用 Router（例如 BrowserRouter）包裹你的应用或相关组件树。示例：import { BrowserRouter } from 'react-router-dom'; function App() { return (<BrowserRouter><YourRoutes /></BrowserRouter>); }
  2. 如果使用嵌套路由，确保每个路由的组件可以访问路由器上下文；避免在不在 Route 或 Router 内部的组件中渲染 Link。
  3. 对于测试，用 MemoryRouter 或 StaticRouter 包裹组件以提供路由上下文。示例：render(<MemoryRouter><Link to='/'>Home</Link></MemoryRouter>);

Dead Ends

Common approaches that don't work:

  1. Importing Router from 'react-router' instead of 'react-router-dom'. 70% fail

    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.

  2. Wrapping only the Link component with a Router, but leaving other parts of the app outside. 80% fail

    The Router must wrap the entire part of the tree that uses routing; partial wrapping can cause other routing components (like useParams) to fail.

  3. Using BrowserRouter but forgetting to install 'react-router-dom' and relying on a global script. 90% fail

    Without proper npm installation, the import may fail or resolve to a different version, leading to context mismatch.