Genie React
Workflows

TanStack Router

Compare Router and browser state, build locations, and test navigation.

Read the current state

npx @genie-react/cli call router_get_state '{}' --json

Check locationSync. A mismatch means Router state and browser history did not agree in the same snapshot.

Inspect the route tree

npx @genie-react/cli call router_list_routes '{}'
npx @genie-react/cli call router_list_matches '{}'

Build before navigating

npx @genie-react/cli call router_build_location \
  '{"to":"/products/$productId","params":{"productId":"42"},"search":{"source":"agent-check"}}' --json

Use the same input to navigate:

npx @genie-react/cli call router_navigate \
  '{"to":"/products/$productId","params":{"productId":"42"},"search":{"source":"agent-check"}}' --json

Wait for the route instead of sleeping:

npx @genie-react/cli call devtools_wait \
  '{"condition":"navigation","name":"/products/42","timeoutMs":10000}' --json

Then prove Router and browser history agree. Replace router-check with the browser session bound to this Genie session:

router_state="$(npx @genie-react/cli call router_get_state '{}' --json)"
printf '%s\n' "$router_state" | \
  jq -e '
    .pathname == "/products/42" and
    .searchStr == "?source=agent-check" and
    .locationSync == "matched"
  '
agent-browser --session router-check \
  eval 'location.pathname === "/products/42" && location.search === "?source=agent-check"' \
  | rg -x 'true'

Finish when the exact pathname and search match in both Router and browser history, the expected content is visible, and focus is correct. Return to the original route if this was a temporary check.

On this page