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

- **ID:** `react/invariant-failed-you-should-not-use-navlink-outside-a-router`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 95%

## 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.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React Router 6.20.0 | active | — | — |
| React 18.2.0 | active | — | — |
| React 19.0.0 | active | — | — |

## Workarounds

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

## Dead Ends

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