Route Parameters Usage

Advanced Parameter Patterns

1. Parameter Validation

// Custom hook for parameter validation
function useValidatedParams(schema) {
  const params = useParams();
  const navigate = useNavigate();
  const [validatedParams, setValidatedParams] = useState(null);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    try {
      const validated = schema.parse(params);
      setValidatedParams(validated);
      setError(null);
    } catch (err) {
      setError(err);
      navigate('/error/invalid-params', { 
        state: { error: err.message } 
      });
    }
  }, [params, schema, navigate]);
  
  return { params: validatedParams, error };
}

// Using with Zod schema
import { z } from 'zod';

const userSchema = z.object({
  userId: z.string().regex(/^\d+$/).transform(Number),
});

function UserProfile() {
  const { params, error } = useValidatedParams(userSchema);
  
  if (error) return <InvalidParams error={error} />;
  if (!params) return <Loading />;
  
  return <UserContent userId={params.userId} />;
}

// Manual validation
function ProductPage() {
  const { productId } = useParams();
  const navigate = useNavigate();
  
  useEffect(() => {
    // Validate product ID format
    if (!/^[A-Z0-9]{8}$/.test(productId)) {
      navigate('/products/invalid-id', { replace: true });
    }
  }, [productId, navigate]);
  
  return <ProductDetails productId={productId} />;
}

2. Dynamic Parameter Types

// Type conversion and parsing
function useTypedParams() {
  const params = useParams();
  
  return {
    userId: parseInt(params.userId, 10),
    price: parseFloat(params.price),
    isActive: params.status === 'active',
    tags: params.tags?.split(',') || [],
    date: params.date ? new Date(params.date) : null,
  };
}

// Complex parameter parsing
function useProductFilters() {
  const params = useParams();
  const searchParams = useSearchParams()[0];
  
  const filters = {
    category: params.category,
    priceRange: {
      min: parseFloat(searchParams.get('minPrice') || '0'),
      max: parseFloat(searchParams.get('maxPrice') || 'Infinity'),
    },
    attributes: JSON.parse(searchParams.get('attrs') || '{}'),
    sortBy: searchParams.get('sort') || 'relevance',
  };
  
  return filters;
}

// Using typed params
function ProductList() {
  const filters = useProductFilters();
  const [products, setProducts] = useState([]);
  
  useEffect(() => {
    fetchProducts(filters).then(setProducts);
  }, [filters]);
  
  return (
    <div>
      <h1>{filters.category} Products</h1>
      <ProductGrid products={products} />
    </div>
  );
}

3. Parameter Patterns

// Complex route patterns
const routes = [
  // Date-based routing
  {
    path: '/archive/:year/:month/:day?',
    element: <ArchivePage />,
  },
  // Version-based API routes
  {
    path: '/api/v:version/:endpoint',
    element: <APIEndpoint />,
  },
  // Multi-language support
  {
    path: '/:lang(en|es|fr)?/products/:id',
    element: <ProductPage />,
  },
  // UUID patterns
  {
    path: '/items/:uuid([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})',
    element: <ItemDetails />,
  },
];

// Date-based component
function ArchivePage() {
  const { year, month, day } = useParams();
  
  const date = {
    year: parseInt(year, 10),
    month: parseInt(month, 10),
    day: day ? parseInt(day, 10) : null,
  };
  
  const isValidDate = () => {
    if (date.year < 1970 || date.year > new Date().getFullYear()) return false;
    if (date.month < 1 || date.month > 12) return false;
    if (date.day && (date.day < 1 || date.day > 31)) return false;
    return true;
  };
  
  if (!isValidDate()) {
    return <Navigate to="/archive" replace />;
  }
  
  return (
    <div>
      <h1>Archive for {year}/{month}{day ? `/${day}` : ''}</h1>
      <ArchiveContent date={date} />
    </div>
  );
}