How to fix Cannot use useParams() for a route that does not contain URL parameters in React

// ❌ Incorrect - no parameters defined
<Route path="/users" element={<UserProfile />} />

// ✅ Correct - parameter defined with :userId
<Route path="/users/:userId" element={<UserProfile />} />

// ❌ Incorrect - useParams in parent component
function App() {
  const { userId } = useParams(); // Returns empty object
  return (
    <Routes>
      <Route path="/users/:userId" element={<UserProfile />} />
    </Routes>
  );
}

// ✅ Correct - useParams in routed component
function UserProfile() {
  const { userId } = useParams(); // Correctly accesses userId
  return <div>User ID: {userId}</div>;
}

function App() {
  return (
    <Routes>
      <Route path="/users/:userId" element={<UserProfile />} />
    </Routes>
  );
}

// ❌ Incorrect import
import { useParams } from 'react-router';

// ✅ Correct import for React Router v6
import { useParams } from 'react-router-dom';

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

// ✅ Correct - Component inside Router
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

import { useParams, Navigate } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams<{ userId: string }>();

  // Handle missing parameter
  if (!userId) {
    return <Navigate to="/users" replace />;
  }

  return <div>User ID: {userId}</div>;
}

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

test('displays user ID from params', () => {
  render(
    <MemoryRouter initialEntries={['/users/123']}>
      <Routes>
        <Route path="/users/:userId" element={<UserProfile />} />
      </Routes>
    </MemoryRouter>
  );

  expect(screen.getByText(/User ID: 123/i)).toBeInTheDocument();
});