路由、导航和 URL

假设您想从您的应用程序链接到Discover。在构建此类 URL 时，需要考虑两件事

const discoverUrl = core.http.basePath.prepend(`/discover`);

console.log(discoverUrl); // https://127.0.0.1:5601/bpr/s/space/app/discover

// Avoid relying on other app's state structure in your app's code:
const discoverUrlWithSomeState = core.http.basePath.prepend(`/discover#/?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'2020-09-10T11:39:50.203Z',to:'2020-09-10T11:40:20.249Z'))&_a=(columns:!(_source),filters:!(),index:'90943e30-9a47-11e8-b64d-95841ca0b247',interval:auto,query:(language:kuery,query:''),sort:!())`);

// Properly generated URL to *Discover* app. Locator code is owned by *Discover* app and available on *Discover*'s plugin contract.
const discoverUrl = await plugins.discover.locator.getUrl({filters, timeRange});
// or directly execute navigation
await plugins.discover.locator.navigate({filters, timeRange});

Kibana 是一个单页应用程序，开发人员应该遵循一组简单的规则，以确保从 Kibana 中的一个地方导航到另一个地方时不会发生页面重新加载。

例如，使用本机浏览器 API 进行导航会导致页面完全重新加载。

const urlToADashboard = core.http.basePath.prepend(`/dashboard/my-dashboard`);

// this would cause a full page reload:
window.location.href = urlToADashboard;

要在不重新加载页面的情况下在不同的 Kibana 应用程序之间导航（默认情况下），core 中有 API

这两种方法都提供自定义功能，例如使用 options 参数在新页面中打开目标。所有选项默认都是可选的。

在它自己的页面上呈现指向不同 Kibana 应用程序的链接也会导致页面完全重新加载

const myLink = () =>
  <a href={urlToADashboard}>Go to Dashboard</a>;

一个解决方法是处理单击事件，阻止浏览器导航并使用 core.application.navigateToApp API

const MySPALink = () =>
  <a
    href={urlToADashboard}
    onClick={(e) => {
      e.preventDefault();
      core.application.navigateToApp('dashboard', { path: '/my-dashboard' });
    }}
  >
    Go to Dashboard
  </a>;

由于为应用程序中的每个 Kibana 链接执行此操作会产生太多样板代码，因此有一个方便的包装器可以帮助您：RedirectAppLinks。

const MyApp = () =>
  <RedirectAppLinks coreStart={{application: core.application}}>
    {/*...*/}
    {/* navigations using this link will happen in SPA friendly way */}
      <a href={urlToADashboard}>Go to Dashboard</a>
    {/*...*/}
  </RedirectAppLinks>

const MyForcedPageReloadLink = () =>
  <a
    href={urlToSomeSpecialApp}
    onClick={(e) => {
      e.preventDefault();
      core.application.navigateToUrl('someSpecialApp', { forceRedirect: true });
    }}
  >
    Go to Some Special App
  </a>;

如果您还需要绕过默认的 onAppLeave 行为，可以将 skipUnload 选项设置为 true。此选项在 navigateToApp 中也可用。

Kibana 应用程序通常使用 React 和 React Router。在这种情况下要遵循的常见规则

这是必需的，以确保 core 知道在您的应用程序内部触发的导航，以便在需要时采取相应的行动。

相对链接将相对于您的应用程序的路由解析（例如：https://127.0.0.15601/app/{your-app-id}），并且以 SPA 友好的方式在您的应用程序中设置内部链接看起来像这样

import {Link} from 'react-router-dom';

const MyInternalLink = () => <Link to="/my-other-page"></Link>

尽量避免直接使用 window.location 和 window.history。
相反，请考虑使用 core 提供的 ScopedHistory 实例。

直接使用 core 的 ScopedHistory 的常见用例

历史上，Kibana 应用程序在 URL 中存储了大量的应用程序状态。Kibana 应用程序今天遵循的最常见的模式是以 rison 格式将状态存储在 _a 和 _g 查询参数中。

这些查询参数遵循以下约定

有一些实用程序可以帮助您实现这种状态同步。

何时应考虑使用状态同步实用程序

何时不应使用状态同步实用程序

请遵循这些文档以了解更多信息。

考虑以下场景

您会注意到您已使用您离开时相同的状态导航到 Dashboard 应用程序，只是时间过滤器已更改为您在 Discover 应用程序上应用的过滤器。

历史上，Kibana Analyze 组应用程序通过依赖 URL 中的状态来实现这种行为。如果您仔细查看导航中的链接，您会注意到状态存储在该链接内部，并且只要发生相关的状态更改，它也会更新

这就是将 分隔为 _a 和 _g 查询参数的地方。被视为全局状态的内容会在这些导航链接中不断更新。在上面的示例中，它是时间过滤器。这由 KbnUrlTracker 实用程序提供支持。您可以使用它来实现类似的行为。