navigate

This function allows the user to navigate to a specified address. It can open a modal window over the current window.

Usage/Signature

import { navigate } from '@app/ui'
navigate(url, params)

Arguments

url*: string The address to which the transition should occur. This function only supports absolute URLs. For relative URLs, use ctx.account.navigate().

params: { replace, openInModalScreen, fullScreenModal, openInExternalApp, resetStack }

An object with additional optional parameters that specify how to open the provided URL.

1. replace: boolean

   • Default: false

   • If true, the new screen will replace the previous one in the current navigation stack/history instead of being added next, so going "back" from such a URL will not consider the URL the user was on before the transition.

   • Also, in the mobile application, there will be no standard transition animation between screens.

2. openInModalScreen: true | false | undefined

   • Default: undefined

   • Allows opening the link in a modal window.

   • true — the new screen will open in a new modal "layer" over the current one with the corresponding animation.

   • false — the link will definitely NOT open in a modal "layer," but in the base layer; if any number of modal "layers" were opened before this action, all of them will be immediately closed, and then a regular navigate will occur in the base stack. Note that false for this property is NOT a passive default value like for most others.

   • undefined — (not specified) navigation will occur in the current stack (base or modal).

3. fullScreenModal: boolean

   • Default: false

   • Only applies when used with openInModalScreen. If true, the modal window will open in full screen with a close button.

4. openInExternalApp: boolean

   • Default: false

   • In the mobile application: Allows opening the link in an external application using the mobile OS's capabilities. Generally, the link will open in the default mobile browser.

   • In the web version: The link will be opened using window.open() (most likely in a new browser tab).

5. resetStack: boolean

   • Default: false
   • Only applies in the application. If true, the link will open with a full stack (there will be no option to go back).

Examples

Sends the user to Google, opening a new window
<button
  class="secondary"
  onClick={navigate("https://google.com", {openInExternalApp: true})}
>
  to Google
</button>

<!-- TODO button to Google -->

The ctx.account and ctx.router objects provide their own navigate methods, which build relative paths considering the current account and the current router, respectively. <!-- TODO pass links -->

<button
  class="secondary"
  onClick={ctx.account.navigate("/")}
>
  To Home
</button>

<!-- TODO To Home -->

The following code will send the user to the route /test, declared within the current page.

<button
  class="secondary"
  onClick={ctx.router.navigate("/test")}
>
  Go to test
</button>

<!-- TODO Go to test -->