useNavigate may only be used inside Router
The useNavigate hook was invoked outside a React Router context.
Usually happens because:
- ☑ useNavigate called in root App component
- ☑ Router provider declared too low in the component tree
- ☑ Missing Router context in test files
🔍 Quick Checklist:
📊 Where this usually happens (estimated occurrence)
What is useNavigate may only be used inside Router?
The useNavigate hook (from React Router) accesses the history context to navigate. Calling it in a component that is not nested inside a <BrowserRouter> (or other Router provider) triggers this error.
Common Causes
- Calling useNavigate inside the App component before the Router wrapper tag is declared.
Common Mistakes
- Attempting to test routes using components containing useNavigate without wrapping test suites inside a `<MemoryRouter>`.
How to Fix
Framework-Specific Examples
No framework examples required for this informational status.
Wrong: Hook outside Router
import { useNavigate, BrowserRouter } from 'react-router-dom';
function App() {
const navigate = useNavigate(); // Throws error
return (
<BrowserRouter>
<div>My App</div>
</BrowserRouter>
);
}Correct: Hook inside Router Nesting
import { useNavigate, BrowserRouter } from 'react-router-dom';
function MainApp() {
const navigate = useNavigate(); // Safe: wrapped inside BrowserRouter context
return <div>My App</div>;
}
export default function App() {
return (
<BrowserRouter>
<MainApp />
</BrowserRouter>
);
}Best Practices
- Ensure `<BrowserRouter>` wraps the outermost parent component containing all routes.
Frequently Asked Questions (FAQ)
Q: Why does useNavigate need a Router?
useNavigate relies on React Context supplied by the Router provider to access history APIs and perform transitions.
Q: Can I use useNavigation instead?
No. useNavigation is a separate React Router hook that tracks page loading states. Both require a Router context to work.
Q: How do I fix this inside tests?
Wrap your component in a `<MemoryRouter>` from `react-router-dom` in your test script.
Q: Does this happen in other router packages?
Yes. Most routing libraries (e.g. Next.js router, Wouter) require target hooks to reside inside context providers.