Skip to main content

@ice/stark-app

以下 api 均从 @ice/stark-app 导出。使用方式如下:

import { isInIcestark } from '@ice/stark-app';

对于使用非 React 的用户,我们建议您直接从 lib 目录下导入这些方法,比如:

import isInIcestark from '@ice/stark-app/lib/isInIcestark';

isInIcestark#

判断当前运行环境,是否运行在 icestark 环境中,返回值类型:boolean

  • 类型:function
  • 示例代码详见 registerAppLeave

getBasename#

配置微应用 React Router 中的 basename 参数的方法,根据 AppRoute 中的 basename 或者 activePath 配置生成最终结果

  • 类型:function
  • 默认值:() => basename || (Array.isArray(activePath) ? activePath[0] : activePath)) || "/"

getMountNode#

根据微应用运行环境,返回微应用渲染节点

  • 类型:function
  • 默认值:<div id="ice-container"></div>
  • 使用规则:方法支持传参,传参代表默认渲染的 DOM 节点,默认节点只在微应用单独启动时生效。支持 string | HTMLElement | functionstring 表示默认 DOM 节点的 idfunction 支持函数返回值作为默认 DOM 节点

renderNotFound#

微应用触发渲染全局 404 的方法

  • 类型:function

appHistory#

提供手动切换不同应用的方法。

appHistory.push#

  • 类型定义: (url: string, state?: object, hashType?: boolean) => void

代码示例一:跳转 url 页面

import React from 'react';
import { appHistory } from '@ice/stark-app';
export default class SelfLink extends React.Component {
render() {
return (
<span
onClick={() => {
appHistory.push('/home?name=ice');
}}
>
selfLink
</span>
);
}
}

代码示例二:传递 state

appHistory.push('/home?name=ice', { framework: 'icestark' });

代码示例三:设置为 hash 路由模式

appHistory.push('/home?name=ice', {}, true);
}

appHistory.replace#

  • 函数类型定义:- 类型定义: (url: string, state?: object, hashType?: boolean) => void
  • 代码示例参考 appHistory.push

AppLink#

提供声明式的,可访问的导航,表示本次跳转需要重新加载静态资源。微应用内部跳转仍然使用 Link

to#

目标路径,同 Link 中的 to 保持一致 ,必填

  • 类型:string | object
  • 默认值:-

replace#

如果为 true,则单击链接将替换历史记录中的当前记录,而不是添加新记录。

  • 类型:boolean
  • 默认值:false

message#

表示当前跳转需要弹窗确认,message 为提示文案内容,选填

  • 类型:string
  • 默认值:-

hashType#

当前跳转以 hash 路由形式进行跳转,选填

  • 类型:boolean
  • 默认值:false

代码示例一:to 为字符串,传递 query 参数

import React from 'react';
import { Link } from 'react-router-dom';
import { AppLink } from '@ice/stark';
export default class SelfLink extends React.Component {
render() {
return (
<div>
// 应用间路由跳转,并携带 query 查询参数
<AppLink to="/waiter/list?name=ice">使用 AppLink 跳转到小二平台的列表页</AppLink>
<Link to="/detail">跳转到商家平台详情页</Link>
</div>
);
}
}

代码示例二:to 为简单对象,传递 state

import React from 'react';
import { Link } from 'react-router-dom';
import { AppLink } from '@ice/stark';
export default class SelfLink extends React.Component {
render() {
return (
<div>
// 应用间路由跳转,并传递 state、query
<AppLink
to={{
pathname: '/waiter/list',
search: '?name=ice',
state: {
framework: 'icestark'
}
}}
>使用 AppLink 跳转到小二平台的列表页</AppLink>
<Link to="/detail">跳转到商家平台详情页</Link>
</div>
);
}
}

registerAppEnter#

提供快速注册当前应用加载前的回调事件

  • 类型:function
  • 示例代码详见 registerAppLeave

registerAppLeave#

提供快速注册当前应用卸载前的回调事件

  • 类型:function
  • 代码示例:
// src/index.js
import ReactDOM from 'react-dom';
import { isInIcestark, getMountNode, registerAppEnter, registerAppLeave } from '@ice/stark-app';
import router from './router';
if (isInIcestark()) {
const mountNode = getMountNode();
registerAppEnter(() => {
ReactDOM.render(router(), getMountNode());
});
// make sure the unmount event is triggered
registerAppLeave(() => {
ReactDOM.unmountComponentAtNode(getMountNode());
});
} else {
ReactDOM.render(router(), document.getElementById('ice-container'));
}

setLibraryName#

配置微应用导出的 umd 全局变量。

  • 类型: function
  • 代码示例:
import ReactDOM from 'react-dom';
import { isInIcestark, setLibraryName } from '@ice/stark-app';
import App from './App';
setLibraryName('microApp');
export function mount(props) {
const { container, customProps } = props;
ReactDOM.render(<App {...customProps} />, container);
}
export function unmount(props) {
const { container } = props;
ReactDOM.unmountComponentAtNode(container);
}