How to fix useLocation() may be used only in the context of a <Router> component. in React

// ✅ Correct: Router at the root in index.tsx
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// ❌ Incorrect: Using useLocation before Router
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation(); // Error! No Router context yet

  return (
    <BrowserRouter>
      <Routes>{/* ... */}</Routes>
    </BrowserRouter>
  );
}

// ❌ Incorrect: AuthProvider wrapping Router
<AuthProvider>
  <BrowserRouter>
    <App />
  </BrowserRouter>
</AuthProvider>

// ✅ Correct: AuthProvider inside Router
<BrowserRouter>
  <AuthProvider>
    <App />
  </AuthProvider>
</BrowserRouter>

<BrowserRouter>
  <AuthProviderWithRouter>
    <App />
  </AuthProviderWithRouter>
</BrowserRouter>

// In AuthProviderWithRouter.tsx
function AuthProviderWithRouter({ children }) {
  const location = useLocation(); // Now safe to use
  // Auth logic using location
  return <AuthProvider location={location}>{children}</AuthProvider>;
}

# Check installed versions
npm list react-router react-router-dom

# Remove duplicate installations
rm -rf node_modules package-lock.json
npm install

{
  "dependencies": {
    "react-router": "^6.20.0",
    "react-router-dom": "^6.20.0"
  }
}

// Using React Testing Library
import { render } from '@testing-library/react';
import { BrowserRouter, MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

test('renders component with routing', () => {
  render(
    <MemoryRouter initialEntries={['/']}>
      <MyComponent />
    </MemoryRouter>
  );

  // Your assertions
});

const { getByText } = render(
  <MemoryRouter initialEntries={['/profile/123']}>
    <Routes>
      <Route path="/profile/:id" element={<ProfilePage />} />
    </Routes>
  </MemoryRouter>
);

// ❌ Incorrect: Hook in same component as Router
function App() {
  const location = useLocation(); // Error!

  return (
    <BrowserRouter>
      <Routes>{/* ... */}</Routes>
    </BrowserRouter>
  );
}

// ✅ Correct: Split into parent and child
function App() {
  return (
    <BrowserRouter>
      <AppContent />
    </BrowserRouter>
  );
}

function AppContent() {
  const location = useLocation(); // Safe here
  // Use location for analytics, auth checks, etc.

  return <Routes>{/* ... */}</Routes>;
}