Implement Fulcro dynamic routing with defrouter and route targets.
npx skills add https://github.com/saskenuba/dotfiles --skill fulcro-routing
Please help me install this Agent Skill. Skill: fulcro-routing Source: https://github.com/saskenuba/dotfiles/tree/main/ai/.claude/skills/fulcro-routing Command: npx skills add https://github.com/saskenuba/dotfiles --skill fulcro-routing
Guides developers on implementing Fulcro dynamic routing using defrouter, route targets, and deferred loading to create robust, state-driven UIs.
Start by defining a router with defrouter, add at least one route target implementing :route-segment and :will-enter, initialize in the parent state, and trigger a route change using dr/change-route!.
High-intent search queries and answers about installing and using this skill.
Dynamic routing in Fulcro is implemented by defining a defrouter that switches UI targets based on app state. You create defsc components as route targets with proper :route-segment and :will-enter logic to handle route changes.
Deferred loading in Fulcro routing prevents empty UI states by fetching data before activating a route. Use route-deferred within a target's :will-enter hook to load required data, ensuring the UI is fully populated before the route becomes visible.
To navigate between route targets after initializing a Fulcro defrouter in parent state, trigger a route change using the dr/change-route! function. This updates the application state and directs the defrouter to render the matching target component.
Yes, you can create a single dynamic router using defrouter that switches UI targets based on app state. This approach allows you to manage complex UI state transitions by mapping route segments directly to specific defsc components.
To configure defsc components as Fulcro route targets, implement the :route-segment property to define the URL path and the :will-enter hook to manage routing logic or deferred data loading before the component renders on screen.
A Fulcro route target renders an empty state when data loads synchronously without waiting for the database. To fix this, use route-deferred in the component's :will-enter hook to load data before the router activates the target route.
saskenubaLoad and merge remote Fulcro data into a local app database.
expoCreate file-based and dynamic routes with tabs and modals in Expo Router apps.
saskenubaTeach Fulcro component architecture with defn and defsc separation of concerns.
saskenubaDesign, implement, and test Fulcro-based statecharts with a complete reference.
