How to fix Dynamic route segment parameter must be a non-empty string in React

What this error means

This error is thrown by React Router when you attempt to navigate to or define a route with a dynamic segment that contains an empty string. Dynamic route segments (parameters) in React Router must always be non-empty strings to ensure proper route matching and parameter extraction. React Router uses dynamic segments in route paths like `/users/:userId` where `:userId` is the parameter. When you navigate to such routes programmatically or render links, the parameter value must be a valid, non-empty string. Empty strings, `null`, or `undefined` values will trigger this error because they create invalid route paths that cannot be properly matched or parsed. This validation exists to maintain route integrity and prevent silent failures where a route might appear to work but actually match incorrectly or fail to extract parameters properly.

Typical symptoms

• Error thrown when using navigate() or Link components with dynamic routes
• Application crashes or shows error boundary when navigating between pages
• Routes fail to match even though the path structure looks correct
• useParams() returns empty object or undefined values unexpectedly
• TypeError or validation errors related to route parameter construction

Common causes

1. Passing empty string, null, or undefined directly to dynamic route parameters in navigate() or Link href
2. Constructing route paths using variables that can be empty or undefined without validation
3. Using optional chaining or fallback values that resolve to empty strings in route generation
4. Fetching ID or parameter from API/state that returns empty value before navigation
5. Template literals or string concatenation creating paths with missing parameter values
6. Destructuring props or params without default values when building navigation paths
7. Using array or object methods (map, find) that can return undefined in route construction

How to fix "Dynamic route segment parameter must be a non-empty string"

import { useNavigate } from 'react-router-dom';

function UserProfile({ userId }) {
  const navigate = useNavigate();

  const handleNavigate = () => {
    // Validate parameter before navigation
    if (!userId || userId.trim() === '') {
      console.error('Invalid userId');
      return;
    }

    navigate(`/users/${userId}`);
  };

  return <button onClick={handleNavigate}>View Profile</button>;
}

import { Link } from 'react-router-dom';

function UserCard({ user }) {
  // Guard against missing or invalid IDs
  if (!user?.id) {
    return <span className="text-muted">User ID unavailable</span>;
  }

  return (
    <Link to={{`/users/${user.id}`}}>
      View Profile
    </Link>
  );
}

function UserCard({ user }) {
  const userId = user?.id;
  const isValidId = userId && userId.trim() !== '';

  return isValidId ? (
    <Link to={`/users/${userId}`}>View Profile</Link>
  ) : (
    <span className="disabled-link">View Profile</span>
  );
}

// Option 1: Default value
function ProductPage({ productId = 'featured' }) {
  const navigate = useNavigate();

  const handleNavigate = () => {
    // productId will never be empty
    navigate(`/products/${productId}`);
  };
}

// Option 2: Optional route segment
// Define route with optional parameter
<Route path="/products/:id?" element={<ProductList />} />

// In component, handle missing parameter
function ProductList() {
  const { id } = useParams();

  if (!id) {
    return <AllProducts />;
  }

  return <ProductDetail id={id} />;
}

function UserDashboard() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUsers().then(data => {
      setUsers(data);
      setLoading(false);
    });
  }, []);

  if (loading) {
    return <LoadingSpinner />;
  }

  return (
    <div>
      {users.map(user => {
        // Filter out invalid entries
        if (!user.id) {
          console.warn('User missing ID:', user);
          return null;
        }

        return (
          <Link key={user.id} to={`/users/${user.id}`}>
            {user.name}
          </Link>
        );
      })}
    </div>
  );
}

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

// Type guard for non-empty strings
type NonEmptyString = string & { __brand: 'NonEmptyString' };

function isNonEmptyString(value: unknown): value is NonEmptyString {
  return typeof value === 'string' && value.trim().length > 0;
}

// Helper function for safe navigation
function useSafeNavigate() {
  const navigate = useNavigate();

  return (path: string, params: Record<string, unknown>) => {
    const validatedParams: Record<string, string> = {};

    for (const [key, value] of Object.entries(params)) {
      if (!isNonEmptyString(value)) {
        throw new Error(`Parameter '${key}' must be a non-empty string`);
      }
      validatedParams[key] = value;
    }

    // Build path with validated params
    let finalPath = path;
    for (const [key, value] of Object.entries(validatedParams)) {
      finalPath = finalPath.replace(`:${key}`, value);
    }

    navigate(finalPath);
  };
}

// Usage
function MyComponent({ userId }: { userId: string }) {
  const safeNavigate = useSafeNavigate();

  const handleClick = () => {
    safeNavigate('/users/:userId', { userId });
  };
}

Advanced notes

const routes = {
  user: (id: string) => {
    if (!id?.trim()) throw new Error('User ID required');
    return `/users/${id}`;
  },
  product: (id: string, tab?: string) => {
    if (!id?.trim()) throw new Error('Product ID required');
    return tab ? `/products/${id}/${tab}` : `/products/${id}`;
  }
};

// Usage ensures validation
navigate(routes.user(userId));

Frequently asked questions

What does "Dynamic route segment parameter must be a non-empty string" mean?

This error is thrown by React Router when you attempt to navigate to or define a route with a dynamic segment that contains an empty string. Dynamic route segments (parameters) in React Router must always be non-empty strings to ensure proper route matching and parameter extraction. React Router uses dynamic segments in route paths like /users/:userId where :userId is the parameter.

How do I fix "Dynamic route segment parameter must be a non-empty string"?

This error occurs in React Router when a dynamic route parameter receives an empty string or undefined value instead of a valid non-empty string. It typically happens when constructing navigation paths programmatically or when route parameters are not properly validated.

What causes "Dynamic route segment parameter must be a non-empty string"?

Passing empty string, null, or undefined directly to dynamic route parameters in navigate() or Link href Constructing route paths using variables that can be empty or undefined without validation Using optional chaining or fallback values that resolve to empty strings in route generation

Is the "Dynamic route segment parameter must be a non-empty string" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• useNavigate() may be used only in the context of a <Router> component

  useNavigate() may be used only in context of Router component

  HIGH

• Route path must start with / or * if it is the first segment of its absolute path

  Route path must start with / or * if it is the first segment

  MEDIUM

• No routes matched location "/path"

  No routes matched location in React Router

  MEDIUM

• Error: useNavigate() may be used only in the context of a <Router> component.

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

  HIGH

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation