Skip to content

Recipes

自定义跳转策略

tsx
const router = createRouter({
  rootRoute: '/',
  history: 'hash',
  customNavigation(evt, stack, def) {
    if (evt.action === 'navigateTo') {
      // 同 path 不重复入栈
      if (stack.some((r) => r.path === evt.payload.path)) return stack;
    }
    return def(evt, stack);
  },
});

公共布局(renderCommon)

tsx
<NavRouter
  router={router}
  render={(p) => <Page path={p} />}
  renderCommon={(children, path) => (
    <div className="shell">
      <header>当前:{path}</header>
      <main>{children}</main>
    </div>
  )}
/>

嵌套 NavStack

外层 NavRouter 接管浏览器 history(一个页面内只允许一个)。 内层用裸 NavStack 控制子页面栈,不传 history 配置。