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

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