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:

   Copy

   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:

   Copy

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

   Copy

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:

   Copy

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:

   Copy