How to fix useParams() may be used only in the context of a Router component in React

// WRONG - useParams used outside Router
import { useParams } from "react-router-dom";

function App() {
  return (
    <div>
      <UserProfile /> {/* This will fail */}
    </div>
  );
}

function UserProfile() {
  const { id } = useParams(); // ERROR: No Router in tree
  return <div>User {id}</div>;
}

// CORRECT - Router wraps components using hooks
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

function UserProfile() {
  const { id } = useParams(); // Works correctly
  return <div>User {id}</div>;
}

// index.tsx or main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

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

import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user/:id" element={<UserProfile />} />
        <Route path="/post/:postId" element={<PostDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

function UserProfile() {
  const { id } = useParams();
  return <div>User Profile: {id}</div>;
}

import { render, screen } from "@testing-library/react";
import { MemoryRouter, Route, Routes } from "react-router-dom";
import UserProfile from "./UserProfile";

test("renders user profile", () => {
  render(
    <MemoryRouter initialEntries={["/user/123"]}>
      <Routes>
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </MemoryRouter>
  );
  
  expect(screen.getByText(/User Profile: 123/)).toBeInTheDocument();
});

# Check for duplicate installations
npm ls react-router-dom

# If duplicates found, remove node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Or with yarn
yarn why react-router-dom
rm -rf node_modules yarn.lock
yarn install

// Parent component (inside Router)
function UserProfileContainer() {
  const { id } = useParams();
  return <UserProfileDisplay userId={id} />;
}

// Child component (doesn't need Router context)
function UserProfileDisplay({ userId }: { userId: string }) {
  return <div>User Profile: {userId}</div>;
}

// React Router v6
import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

// React Router v5 (older)
import { BrowserRouter, Switch, Route, useParams } from "react-router-dom";

// Check your installed version
npm list react-router-dom