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

ReactBEGINNERHIGHUpdated Dec 10, 2025· 127 views

This error occurs when you call the useParams hook in a component that is not wrapped by a React Router component like BrowserRouter or HashRouter. The hook requires access to React Router's context to retrieve URL parameters, which is only available within the router tree.

Quick fix

Fixes useParams() may be used only in the context of a Router component

// 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>;
}

Verify Router component wraps your application
Move Router to a higher level in the component tree
Ensure component is rendered inside a Route
Fix test setup by wrapping component in MemoryRouter

react — error

$// 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>;
}
useParams() may be used only in the context of a Router component

What this error means

React Router hooks like useParams rely on React context to access routing information. When you call useParams, React looks up the component tree for a Router provider (such as BrowserRouter, HashRouter, or MemoryRouter) that supplies the routing context. If no router is found in the component's ancestor tree, React Router throws this invariant violation error. This error is React Router's way of telling you that the component calling useParams is either rendered outside the router entirely, or the router component has not been properly set up in your application's component hierarchy. The hook needs to be called within a component that is a descendant of a Router component to function correctly.

Typical symptoms

Application crashes with "Invariant failed" or "Invariant violation" error message
Error specifically mentions "useParams() may be used only in the context of a <Router> component"
Error occurs when trying to access URL parameters in a component
Browser console shows React error boundary or uncaught exception
Component renders without error in isolation but fails when integrated into the app
Error appears immediately when component mounts
Similar errors for other React Router hooks like useNavigate, useLocation, or useMatch

Common causes

Component using useParams is rendered outside of BrowserRouter or other Router component in the component tree
Router component is placed too low in the component hierarchy, not wrapping the component that needs useParams
useParams is called directly in a component that is rendered before the Router is mounted
Testing a component without wrapping it in a Router or MemoryRouter in the test setup
Importing and using useParams in a file that is not part of the React component tree (like a utility file or service)
Multiple versions of react-router-dom installed, causing the hook to look for context from the wrong package version
Using useParams in a component that is lazy-loaded or code-split incorrectly outside the Router boundary
Router component accidentally removed or commented out during refactoring

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

1Verify Router component wraps your application

Check your root component (usually App.tsx or index.tsx) and ensure that BrowserRouter (or another Router variant) wraps all components that need routing. The Router must be a parent of any component using useParams.

tsx

// 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>;
}

2Move Router to a higher level in the component tree

If your Router is nested inside other components, move it higher up, ideally in your root file (index.tsx or main.tsx). This ensures all components have access to routing context.

tsx

// 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>
);

3Ensure component is rendered inside a Route

The component calling useParams must be rendered as part of a Route element. Make sure your routes are properly configured and the component is included in the routing structure.

tsx

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>;
}

4Fix test setup by wrapping component in MemoryRouter

If you encounter this error in tests, wrap your component with MemoryRouter in your test file. MemoryRouter provides the routing context needed for hooks without requiring browser APIs.

tsx

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();
});

5Check for multiple react-router-dom versions

Multiple versions of react-router-dom can cause context mismatches. Check your package.json and lock file to ensure only one version is installed.

bash

# 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

6Pass route parameters as props instead of using useParams

If you cannot restructure your component hierarchy, consider passing route parameters as props from a parent component that is within the Router context.

tsx

// 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>;
}

7Verify Router import matches your React Router version

React Router v6 uses different exports than v5. Ensure you're importing from the correct package and using the right Router component for your version.

tsx

// 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

Advanced notes

This error is part of React Router's invariant system, which validates that hooks are used correctly at runtime. The error is intentionally thrown to prevent undefined behavior that would occur if useParams tried to access context that doesn't exist. In some advanced scenarios, you might encounter this error when using Server-Side Rendering (SSR) with frameworks like Next.js or Remix. These frameworks have their own routing systems, and mixing them with React Router can cause conflicts. If you're using Next.js, consider using Next.js's built-in routing with useRouter from next/router instead of React Router. For micro-frontend architectures where multiple apps share routing state, ensure each app has its own Router instance or use a shared routing context provider. When working with React Router v6.4+ data APIs (createBrowserRouter and RouterProvider), the error may also occur if you try to use hooks outside the routes defined in the router configuration. In such cases, ensure your routes are properly configured in the router object passed to RouterProvider.

Frequently asked questions

What does "useParams() may be used only in the context of a Router component" mean?: React Router hooks like useParams rely on React context to access routing information. When you call useParams, React looks up the component tree for a Router provider (such as BrowserRouter, HashRouter, or MemoryRouter) that supplies the routing context. If no router is found in the component's ancestor tree, React Router throws this invariant violation error.
How do I fix "useParams() may be used only in the context of a Router component"?: This error occurs when you call the useParams hook in a component that is not wrapped by a React Router component like BrowserRouter or HashRouter. The hook requires access to React Router's context to retrieve URL parameters, which is only available within the router tree.
What causes "useParams() may be used only in the context of a Router component"?: Component using useParams is rendered outside of BrowserRouter or other Router component in the component tree Router component is placed too low in the component hierarchy, not wrapping the component that needs useParams useParams is called directly in a component that is rendered before the Router is mounted
Is the "useParams() may be used only in the context of a Router component" error serious?: Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.