diff --git a/dev_docs/key_concepts/navigation.mdx b/dev_docs/key_concepts/navigation.mdx index b96bfede8fe36..6f3a5e737f91f 100644 --- a/dev_docs/key_concepts/navigation.mdx +++ b/dev_docs/key_concepts/navigation.mdx @@ -89,6 +89,10 @@ To navigate between different Kibana apps without a page reload there are APIs i * [core.application.navigateToApp](https://github.com/elastic/kibana/blob/main/docs/development/core/public/kibana-plugin-core-public.applicationstart.navigatetoapp.md) * [core.application.navigateToUrl](https://github.com/elastic/kibana/blob/main/docs/development/core/public/kibana-plugin-core-public.applicationstart.navigatetourl.md) +Both methods offer customization such as opening the target in a new page, with an `options` parameter. All the options are optional be default. +* [core.application.navigateToApp options](https://github.com/elastic/kibana/blob/main/docs/development/core/public/kibana-plugin-core-public.navigatetoappoptions.md) +* [core.application.navigateToUrl options](https://github.com/elastic/kibana/blob/main/docs/development/core/public/kibana-plugin-core-public.navigatetourloptions.md) + *Rendering a link to a different app on its own would also cause a full page reload:* ```jsx @@ -124,6 +128,24 @@ const MyApp = () => ``` +NOTE: There may be cases where you need a full page reload. While rare and should be avoided, rather than implement your own navigation, +you can use the `navigateToUrl` `forceRedirect` option. + +```tsx +const MyForcedPageReloadLink = () => + { + e.preventDefault(); + core.application.navigateToUrl('someSpecialApp', { forceRedirect: true }); + }} + > + Go to Some Special App + ; +``` + +If you also need to bypass the default onAppLeave behavior, you can set the `skipUnload` option to `true`. This option is also available in `navigateToApp`. + ## Setting up internal app routing It is very common for Kibana apps to use React and React Router. diff --git a/docs/developer/best-practices/navigation.asciidoc b/docs/developer/best-practices/navigation.asciidoc index 32946a2f74bd9..e969f00c41eb1 100644 --- a/docs/developer/best-practices/navigation.asciidoc +++ b/docs/developer/best-practices/navigation.asciidoc @@ -85,11 +85,15 @@ const urlToADashboard = core.http.basePath.prepend(`/dashboard/my-dashboard`); window.location.href = urlToADashboard; ---- -To navigate between different {kib} apps without a page reload there are APIs in `core`: +To navigate between different {kib} apps without a page reload (by default) there are APIs in `core`: * {kib-repo}tree/{branch}/docs/development/core/public/kibana-plugin-core-public.applicationstart.navigatetoapp.md[core.application.navigateToApp] * {kib-repo}tree/{branch}/docs/development/core/public/kibana-plugin-core-public.applicationstart.navigatetourl.md[core.application.navigateToUrl] +Both methods offer customization such as opening the target in a new page, with an `options` parameter. All the options are optional be default. +* {kib-repo}tree/{branch}/docs/development/core/public/kibana-plugin-core-public.navigatetoappoptions.md[core.application.navigateToApp options] +* {kib-repo}tree/{branch}/docs/development/core/public/kibana-plugin-core-public.navigatetourloptions.md[core.application.navigateToUrl options] + *Rendering a link to a different {kib} app on its own would also cause a full page reload:* [source,typescript jsx] @@ -128,6 +132,25 @@ const MyApp = () => ---- +NOTE: There may be cases where you need a full page reload. While rare and should be avoided, rather than implement your own navigation, +you can use the `navigateToUrl` `forceRedirect` option. + +[source,typescript jsx] +---- +const MyForcedPageReloadLink = () => + { + e.preventDefault(); + core.application.navigateToUrl('someSpecialApp', { forceRedirect: true }); + }} + > + Go to Some Special App + ; +---- + +If you also need to bypass the default onAppLeave behavior, you can set the `skipUnload` option to `true`. This option is also available in `navigateToApp`. + [[routing]] === Setting up internal app routing diff --git a/src/core/public/application/types.ts b/src/core/public/application/types.ts index 4e96e96505083..5360f7cdc970b 100644 --- a/src/core/public/application/types.ts +++ b/src/core/public/application/types.ts @@ -821,6 +821,7 @@ export interface ApplicationStart { * ``` * * @param url - an absolute URL, an absolute path or a relative path, to navigate to. + * @param options - navigation options */ navigateToUrl(url: string, options?: NavigateToUrlOptions): Promise; /**