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

// App.tsx or main.tsx
import { BrowserRouter } from 'react-router-dom';
import { Routes, Route } from 'react-router-dom';
import MyComponent from './components/MyComponent';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<MyComponent />} />
        {/* other routes */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import MyComponent from './components/MyComponent';

const router = createBrowserRouter([
  {
    path: '/',
    element: <MyComponent />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

// main.tsx
import { BrowserRouter } from 'react-router-dom';
import { useSearchParams } from 'react-router-dom'; // ❌ Won't work here

function App() {
  const [searchParams] = useSearchParams(); // ❌ Error!

  return (
    <BrowserRouter>
      {/* routes */}
    </BrowserRouter>
  );
}

// MyComponent.tsx
import { useSearchParams } from 'react-router-dom';

function MyComponent() {
  const [searchParams, setSearchParams] = useSearchParams(); // ✅ Works
  const query = searchParams.get('q');

  return <div>Search query: {query}</div>;
}

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import MyComponent from './MyComponent';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<MyComponent />} />
      </Routes>
    </BrowserRouter>
  );
}

// MyComponent.test.tsx
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render without errors', () => {
    render(
      <MemoryRouter initialEntries={['/?q=test']}>
        <MyComponent />
      </MemoryRouter>
    );

    expect(screen.getByText(/Search query: test/i)).toBeInTheDocument();
  });
});

import { render } from '@testing-library/react';
import { MemoryRouter, Routes, Route } from 'react-router-dom';
import MyComponent from './MyComponent';

test('renders with search params', () => {
  render(
    <MemoryRouter initialEntries={['/?filter=active&page=2']}>
      <Routes>
        <Route path="/" element={<MyComponent />} />
      </Routes>
    </MemoryRouter>
  );

  // assertions...
});

function App() {
  return (
    <BrowserRouter>
      <Layout>
        <BrowserRouter> {/* ❌ Don't nest routers */}
          <Routes>
            <Route path="/" element={<Home />} />
          </Routes>
        </BrowserRouter>
      </Layout>
    </BrowserRouter>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
}

// utils/searchParams.ts
export function getSearchParam(key: string): string | null {
  if (typeof window === 'undefined') return null;

  const searchParams = new URLSearchParams(window.location.search);
  return searchParams.get(key);
}

export function getAllSearchParams(): Record<string, string> {
  if (typeof window === 'undefined') return {};

  const searchParams = new URLSearchParams(window.location.search);
  const params: Record<string, string> = {};

  searchParams.forEach((value, key) => {
    params[key] = value;
  });

  return params;
}