> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sample Flows

## Article: Sample Flows

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/pages-and-navigation/router/sample-flows.md

## Article Content:

# Router API: Sample Flows

This article presents a possible use case and corresponding sample flow that you can support. It provides a useful starting point as you plan your implementation.

## Go to an app page after a form submits

This flow takes a site visitor to the Wix Bookings checkout page once your form saves the details they entered.

To go to an app page after a form submits, follow these steps:

1. Retrieve the path of the checkout page with `appSectionRelativeUrl()` in `@wix/site-service-url`. Specify the app ID and the app page ID:

   ```ts
   const checkoutPath = urlService.appSectionRelativeUrl('13d21c63-b5ec-5912-8397-c3a5ddb27a97', 'book_checkout')
   ```

   When the app has no page with that ID, `appSectionRelativeUrl()` returns the path of the app's first page, so this flow assumes the checkout page exists.

2. Add state that records whether the navigation failed:

   ```ts
   const [failed, setFailed] = useState(false)
   ```

3. When `checkoutPath` is `undefined`, no page on the site belongs to the app. Don't render the form:

   ```tsx
   if (!checkoutPath) {
       return null
   }
   ```

4. Write a submit handler that saves the details with your own `saveBookingDetails()`, and then calls `navigateTo()` with the site root URL followed by the path. The promise rejects when the navigation fails, so treat a rejection like `false`:

   ```ts
   const submit = async (event: React.FormEvent<HTMLFormElement>) => {
       event.preventDefault()
       await saveBookingDetails(new FormData(event.currentTarget))
       const navigated = await routerService.navigateTo({ href: `${urlService.siteUrl}${checkoutPath}` }).catch(() => false)
       setFailed(!navigated)
   }
   ```

5. Render the form, with the fields in your own `BookingDetailsFields` component. When `navigateTo()` resolves `false`, the site visitor is still on the current page, so tell them next to the button:

   ```tsx
   return (
       <form onSubmit={submit}>
           <BookingDetailsFields />
           <button type="submit">Continue to checkout</button>
           {failed && <p>The checkout isn't available right now.</p>}
       </form>
   )
   ```