@equinor/核聚变-框架-模块-导航

运行和导航模块 融合框架 具有可观察到的状态管理和自动基名本地化.

特征

• 路径本地化 消费者采用清洁道路(/users),而历史堆栈则收到完整的路径(/apps/my-app/users) (中文(简体) ).
• 可观察状态 ——作为RxJS观测器暴露的导航状态(state$与 shareReplay 语义.
• 多历史类型 ——浏览器(路径名),散列(#/path),和内存(没有 URL 更改).
• 路由器兼容性 —— 说 createRouter() 创建 @remix-run/router 与框架历史连接的实例.
• 导航屏蔽 - 拦截导航 history.block() 并随意重试.
• 遥测事件( E) ——发出 NavigateEvent 编号 : NavigatedEvent 通过遥测模块跟踪动作.

安全操作遥测

INavigationProvider 扩展共享 TelemetryConnectable 合同。 导航保留 现有 Navigation::* 而不是采用新的业务记录名称.

初始化后,导航无需等待即可连接可用的主机遥测 在启动时。 明确 setTelemetry(provider) 优先; setTelemetry(undefined) 禁用自动连接。 自动接线报告 Navigation::navigated 没有每个动作调试聊天.

遥测不再包括地点、以前地点、路由状态或动作 载荷。 使用静态的清晰提供器动作事件 Navigation::action 名称只包含受控动作类型。 更新旧动态名称的消费者 或有效载荷场。 导航商务事件和通路行为不变. 见 操作遥测。 。 。 .

安装

pnpm add @equinor/fusion-framework-module-navigation

使用量

启用模块

import { enableNavigation } from '@equinor/fusion-framework-module-navigation';

// Minimal — basename only
enableNavigation(configurator, '/apps/my-app');

// Advanced — full configuration
enableNavigation(configurator, {
  configure: (config) => {
    config.setBasename('/apps/my-app');
    config.setHistory(createHistory('browser'));
  },
});

程序导航

const navigation = framework.modules.navigation;

navigation.push('/users');             // adds history entry
navigation.replace('/login');          // replaces current entry
navigation.push('/users', { id: 1 }); // with state

console.log(navigation.path.pathname); // '/users' — basename removed

可观测导航状态

import { filter } from 'rxjs';

navigation.state$.subscribe(({ action, location }) => {
  console.log(action, location.pathname); // 'PUSH' '/users'
});

navigation.state$.pipe(
  filter(({ action }) => action === 'POP'),
).subscribe(({ location }) => {
  console.log('Back/forward to', location.pathname);
});

创建 href / URL

// basename = '/apps/my-app'
navigation.createHref('/users');
// → '/apps/my-app/users'

navigation.createURL('/users');
// → URL { pathname: '/apps/my-app/users', ... }

路由器整合(遗产)

说明: 偏爱 @equinor/fusion-framework-react-router 新申请.

import type { AgnosticRouteObject } from '@remix-run/router';

const routes: AgnosticRouteObject[] = [
  { path: '/', element: <Home /> },
  { path: '/users/:id', element: <UserDetail /> },
];

const router = navigation.createRouter(routes);

总是使用 navigation.createRouter() 改为 createBrowserRouter() 直接在提供者外创建路由器 .

历史类型

import { createHistory } from '@equinor/fusion-framework-module-navigation';

const browserHistory = createHistory('browser');
const hashHistory    = createHistory('hash');
const memoryHistory  = createHistory('memory');

导航屏蔽

const unblock = navigation.history.block((transition) => {
  if (hasUnsavedChanges) {
    showConfirmDialog(() => {
      unblock();          // remove blocker first
      transition.retry(); // then retry navigation
    });
  } else {
    unblock();
    transition.retry();
  }
});

API 参考

职能

类

接口类型( T)

活动

配置

另见

• @equinor/fusion-framework-react-router ——反应路由器集成
• 导航烹饪本 - 带有路由的示例应用程序