← All errors · LovableLovable & Bolt app errors

useNavigate() may be used only in the context of a <Router> component

Exact error

Uncaught Error: useNavigate() may be used only in the context of a <Router> component.
    at invariant (react-router-dom.js)
    at useNavigateUnstable (react-router-dom.js)
    at useNavigate (react-router-dom.js)

What it means

A component that calls a React Router hook (useNavigate, useLocation, useParams, useHref, useRoutes) rendered somewhere that is not inside <BrowserRouter> or another router. Lovable and many Bolt projects are Vite + React Router apps, so this usually appears right after the AI adds an auth provider, navbar or redirect logic in the wrong place. In a production build React Router drops the message, so you may only see a blank white page.

Likely causes

• An AuthProvider, layout or Navbar that calls useNavigate() wraps <BrowserRouter> in App.tsx instead of sitting inside it.
• A component rendered directly in main.tsx, a portal, a toast, or a modal root outside the router.
• Two copies of React Router in the bundle (for example react-router and react-router-dom on different major versions), so the hook looks for a router that belongs to the other copy.
• A test renders the component without wrapping it in a MemoryRouter.

How to fix it

1. Open the browser console and find the component named just above useNavigate in the stack. In development the stack points to the exact component; in a production build, run the app with npm run dev to get the full message.

2. Move <BrowserRouter> up so it wraps every component that uses router hooks. In a typical Lovable App.tsx, providers that navigate must go inside the router:

   // Broken: AuthProvider calls useNavigate() but is outside the router
   <AuthProvider>
     <BrowserRouter>
       <Routes>...</Routes>
     </BrowserRouter>
   </AuthProvider>
   
   // Fixed
   <BrowserRouter>
     <AuthProvider>
       <Routes>...</Routes>
     </AuthProvider>
   </BrowserRouter>

3. If something must live outside the router (for example code in main.tsx or a plain helper function), do not call the hook there. Pass a callback in, or move the router into main.tsx so the whole app sits inside it:

   // main.tsx
   import { BrowserRouter } from 'react-router-dom';
   createRoot(document.getElementById('root')).render(
     <BrowserRouter>
       <App />
     </BrowserRouter>
   );

4. Check for duplicate router packages. All imports should come from one package and one major version:

   npm ls react-router react-router-dom
   # If you see two different major versions, pick one and import
   # BrowserRouter, Routes and useNavigate from the same package.

5. In tests, wrap the component in a MemoryRouter:

   render(
     <MemoryRouter initialEntries={['/']}>
       <Navbar />
     </MemoryRouter>
   );

Prevent this next time

• Connect the project to GitHub so every AI edit is versioned and reversible.
• Run `npm run build` locally or in CI before deploying an exported project.

Last checked against official docs on October 18, 2026. Sources: React Router docs: useNavigate.

Related errors

• Lovable app shows a blank white page after deploying elsewhere
• TypeError: Cannot read properties of undefined (reading 'map')
• Lovable/Vite: Failed to resolve import

More Lovable errors and fixes →