title: 微应用路由 subtitle: We App Router cols: 2

API

微应用路由主要提供的能力有两部分，

1. 组件。包括链接(Link)、导航链接(NavLink)、跳转(Redirect)。
2. 辅助功能。获取查询参数(getSearchParams)，路由类型(routerType)，路由枚举(RouterType)，微应用名称(microAppName)。

微应用的路由与常规路由有些差异

1. 在微应用内部，按照常规的应用路由的写法来，如微应用org，管理组织的路由为/manage/org，管理角色的路由为/manage/role，这种路径称为微应用内路径
2. 微应用在运行时，路由会有所变化，会将微应用名称作为路由的第一级，还是上面的例子，管理组织的实际路由为/org/manage/org，这种路径称为绝对路径

路由的几种写法，假设微应用为common，basename为/xxx

1. true, 始终匹配
2. /home/:id, 匹配 /xxx/common/home/123
3. /home, 匹配以 /xxx/common/home 开头的路径，需要完全匹配，需配置exact为true，参照react-router
4. ~/user/home/:id, 匹配的是 /xxx/user/home/123，~标识从basename开始
5. { path: '/home', exact: true, strict: true }, exact、strict 参照react-router

另外，为了保持使用习惯，API的设计大体上参照react-router的API。

所以，路由必须以/开头。

请确保构建工具会注入微应用名称MICRO_APPNAME，如webpack通过definePlugin注入MICRO_APPNAME。

Link

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | to | 链接，必须以/开头，建议使用微应用内路径，如/detail或者{path: '/detail', query: 'id=1&new=1'}或者{path: '/detail', query: {id:1,new:1}} | String/Object | 无 | | children | 子节点 | React.children | 无 |

Route

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | to | 链接，建议使用微应用内路径，如/detail或者{path: '/detail', query: 'id=1&new=1'}或者{path: '/detail', query: {id: 1, new: 1} | String/Object | 无 | | exact | 是否完全匹配 | Boolean | false | | strict | 是否末尾无/ | Boolean | false | | route | 路由匹配规则，基于path-to-regexp | String/String[] | 无 | routeIgnore | 路由反向匹配规则，除指定的路由外都匹配 | String/String[] | 无 | routeMatch | 路径匹配函数，用于确定当前路径是否匹配 | Function | 内置匹配函数 | | onRouteMatch | 路径匹配时的回调，入参为当前匹配的路径对象，含pathname、params、query等 | Function | 无 | | matchProps | 路径匹配时向children注入的props，默认会传入match，一般传className即可 | Object | { match: true/false } | | children | 子组件 | React.Element，props中注入match，即当前匹配的路径对象，含pathname、params、query等 | 无 |

NavLink

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | to | 链接，建议使用微应用内路径，如/detail或者{path: '/detail', query: 'id=1&new=1'}或者{path: '/detail', query: {id: 1, new: 1} | String/Object | 无 | | exact | 是否完全匹配 | Boolean | false | | strict | 是否末尾无/ | Boolean | false | | route | 路由匹配规则，基于path-to-regexp | String/String[] | 无 | routeMatch | 路径匹配函数，用于确定当前路径是否匹配 | Function | 内置匹配函数 | | onRouteMatch | 路径匹配时的回调，入参为当前匹配的路径对象，含pathname、params、query等 | Function | 无 | | matchProps | 路径匹配时向children注入的props，默认会传入match，一般传className即可 | Object | { match: true/false } | | children | 子组件 | React.Element，props中注入match，即当前匹配的路径对象，含pathname、params、query等 | 无 |

Redirect

可当做React Component使用，或者当做函数调用，如

<Redirect to="" />

redirectTo('/');

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | to | 链接，建议使用微应用内路径，如/detail或者{path: '/detail', query: 'id=1&new=1'}或者{path: '/detail', query: {id: 1, new: 1} | String/Object | 无 |