webf-routing-setup_skill

Overview

This skill sets up hybrid routing with native screen transitions for WebF apps, replacing traditional SPA routing patterns. It explains how to configure routes, perform programmatic navigation, pass state between screens, and use React or Vue adapters that integrate with the Flutter Navigator.

How this skill works

Instead of rendering all routes inside a single web page, each route becomes a separate native Flutter screen with platform-native transitions and its own lifecycle. The skill shows how to use @openwebf/react-router or @openwebf/vue-router, the WebFRouter API, and the provided hooks to push, replace, pop, and restore screens while keeping navigation synchronized with Flutter.

When to use it

• Building mobile or desktop apps with WebF where native screen transitions and hardware back handling are required.
• Implementing multi-screen flows that need independent lifecycle and memory management per route.
• Replacing react-router-dom or window.history usage that fails in WebF environments.
• Adding deep linking or restoration support that integrates with platform navigation.
• Creating conditional, protected, or stateful navigation flows across screens.

Best practices

• Always use @openwebf/react-router or @openwebf/vue-router instead of browser SPA routers.
• Add a title prop to every Route so the native navigation bar displays correctly.
• Pass transient data via WebFRouter.pushState or replacement APIs instead of relying on in-screen shared state.
• Use hooks (useLocation, useParams, useNavigate) for declarative access to route info.
• Handle unsaved changes with a custom back confirmation and use WebFRouter.back/maybePop appropriately.

Example use cases

• Multi-screen e-commerce app: push product detail screens with product data in route state.
• Authentication flow: redirect unauthenticated users to a login screen and restore afterward.
• Cross-platform app: adapt web router usage to WebF by swapping to @openwebf/* router adapters.
• Complex form wizard: popAndPushNamed or restorable navigation for checkout or multi-step flows.
• Deep linking: open specific native screens from external links while preserving navigation stack.