TanStack LogoStart

Breadcrumbs Demo

Jane Smith

Designer
Acme Corporation

Try it: Click the pencil icon to edit this employee's name. After saving, notice how the breadcrumb above updates immediately! This works because:

  1. The mutation calls updateEmployee()
  2. Then it calls router.invalidate()
  3. This re-runs the route loader, which fetches the updated employee data
  4. The loader returns the new crumb value
  5. useMatches() in BreadcrumbNav picks up the change

The Code

const handleSave = async () => {
  await updateEmployee({
    id: employee.id,
    name: editName,
    surname: editSurname,
  });
  
  // This is the key line!
  // It re-runs all loaders, updating breadcrumbs
  await router.invalidate();
};