react runtime_error ai_generated true

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

ID: react/invariant-failed-you-should-not-use-navlink-outside-a-router

Also available as: JSON · Markdown · 中文
95%Fix Rate
88%Confidence
1Evidence
2023-11-20First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React Router 6.20.0 active — — —
React 18.2.0 active — — —
React 19.0.0 active — — —

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.

generic

中文

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

Official Documentation

https://reactrouter.com/en/main/components/nav-link

Workarounds

  1. 95% success 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>; }` 
    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. 90% success If using nested routers, ensure only one Router provider wraps the entire app. Remove duplicate Router components. 
    If using nested routers, ensure only one Router provider wraps the entire app. Remove duplicate Router components.

中文步骤

  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.

Dead Ends

Common approaches that don't work:

  1. 95% fail

    The error is about missing React context from Router, not DOM structure.

  2. 85% fail

    NavLink is part of react-router-dom; using wrong import source doesn't provide the Router context.