I'm using React Router v7.20 and getting this error in my Account.jsx component

Question

The error happens when I refresh the page or navigate between "/account", "/account/bookings", and "/account/places".

import React, { useContext } from 'react';
import { UserContext } from '../UserContext/usercontext';
import { Navigate, useParams, useLocation } from 'react-router-dom';
import { Link } from 'react-router-dom';

export default function Account() {
  const { user, ready } = useContext(UserContext);
  const location = useLocation();

  if (!ready) return <div>Loading...</div>;
  if (!user) return <Navigate to="/login" />;

  const { subpage } = useParams();

  function isActive(path) {
    return location.pathname === path ? "bg-primary text-white" : " ";
  }

  return (
    <div>
      <nav>
        <Link className={isActive("/account")} to="/account">Profile</Link>
        <Link className={isActive("/account/bookings")} to="/account/bookings">Bookings</Link>
        <Link className={isActive("/account/places")} to="/account/places">Places</Link>
      </nav>

      {!subpage && <h2>Welcome, {user.name}!</h2>}
    </div>
  );
}

Questions:

• Why am I still getting the "change in order of Hooks" error?
• Is there a better way to handle subpages (useParams()) in React Router 7.20?
• Could this be an issue with React Router, or is it a problem in my component structure?

Environment Details:

• React: 18.x
• React-Router-DOM: 7.20
• Node.js: 16.x

Answer 1

Hooks should always be called at top level.In your case you are returning

if (!ready) return <div>Loading...</div>;
if (!user) return <Navigate to="/login" />;

before calling useParams()

Answer 2

You cannot conditionally call React hooks. Move the useParams hook call above any early returns.

import React, { useContext } from 'react';
import { UserContext } from '../UserContext/usercontext';
import { Link, Navigate, useParams, useLocation } from 'react-router-dom';

export default function Account() {
  const { user, ready } = useContext(UserContext);
  const location = useLocation();

  const { subpage } = useParams(); // <-- before any early returns

  if (!ready) return <div>Loading...</div>;

  if (!user) return <Navigate to="/login" />;
  
  function isActive(path) {
    return location.pathname === path ? "bg-primary text-white" : " ";
  }

  return (
    <div>
      <nav>
        <Link className={isActive("/account")} to="/account">Profile</Link>
        <Link
          className={isActive("/account/bookings")}
          to="/account/bookings"
        >
          Bookings
        </Link>
        <Link
          className={isActive("/account/places")}
          to="/account/places"
        >
          Places
        </Link>
      </nav>

      {!subpage && <h2>Welcome, {user.name}!</h2>}
    </div>
  );
}