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

// index.js or main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

// ✅ Correct: Component is inside Router
<BrowserRouter>
  <App>
    <MyComponent /> {/* Can use useNavigate here */}
  </App>
</BrowserRouter>

// ❌ Wrong: Component is outside Router
<div>
  <BrowserRouter>
    <App />
  </BrowserRouter>
  <MyComponent /> {/* Cannot use useNavigate here */}
</div>

// ✅ Correct order
<BrowserRouter>
  <AuthProvider>
    <App />
  </AuthProvider>
</BrowserRouter>

// ❌ Wrong order
<AuthProvider>
  <BrowserRouter>
    <App />
  </BrowserRouter>
</AuthProvider>

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

test('component renders correctly', () => {
  render(
    <BrowserRouter>
      <MyComponent />
    </BrowserRouter>
  );
  // Your test assertions...
});

// test-utils.js
import { render } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';

export function renderWithRouter(ui, options = {}) {
  return render(
    <BrowserRouter>
      {ui}
    </BrowserRouter>,
    options
  );
}

// In your test file
import { renderWithRouter } from './test-utils';

test('component works', () => {
  renderWithRouter(<MyComponent />);
});

// If rendering to a portal
import { createPortal } from 'react-dom';
import { useNavigate } from 'react-router-dom';

function ModalWithNavigation() {
  const navigate = useNavigate(); // This works because component is inside Router

  return createPortal(
    <div className="modal">
      <button onClick={() => navigate('/home')}>Go Home</button>
    </div>,
    document.getElementById('modal-root')
  );
}

// The parent component tree should be:
// <BrowserRouter>
//   <App>
//     <ModalWithNavigation /> {/* Component using portal is inside Router */}
//   </App>
// </BrowserRouter>

import { useInRouterContext } from 'react-router-dom';

function MyComponent() {
  const hasRouter = useInRouterContext();

  console.log('Has router context:', hasRouter);

  if (!hasRouter) {
    console.error('Component is not inside a Router!');
    return <div>Router context missing</div>;
  }

  // Safe to use routing hooks now
  const navigate = useNavigate();
  // ...
}