ColumnRouter 列路由器

基于路由栈的多列布局路由器,自动根据路由深度渲染多列,类似 Telegram Desktop。

导入

import { ColumnRouter, RouteStackProvider } from '@xcloud/ui-mobile';

示例

基础用法

import { ColumnRouter, RouteStackProvider, useRouteStack } from '@xcloud/ui-mobile';

function App() {
  return (
    <RouteStackProvider>
      <div style={{ height: '100vh' }}>
        <ColumnRouter />
      </div>
    </RouteStackProvider>
  );
}

// 在组件中使用路由栈
function ListPage() {
  const { push } = useRouteStack();

  return (
    <div>
      <button onClick={() => push({
        path: '/detail/1',
        component: <DetailPage id="1" />,
      })}>
        查看详情
      </button>
    </div>
  );
}

多列行为

移动端

• 只显示最后一列(栈顶路由)
• 支持返回动画

桌面端

• 并排显示多列
• 自动计算可显示列数
• 超出列数时在最后一列内切换

API

ColumnRouter

属性	类型	默认值	说明
layoutConfig	PageLayoutConfig	-	布局配置
enableScroll	boolean	true	是否开启滚动
animationConfig	AnimationConfig	-	动画配置
onColumnCountChange	(count: number) => void	-	列数变化回调

与 RouteStackProvider 配合

<RouteStackProvider>
  <ColumnRouter
    layoutConfig={{
      mode: 'auto',  // 'mobile' | 'desktop' | 'auto'
      responsive: true,
      multiColumn: {
        columnWidth: '375px',
        maxColumns: 3,
      },
    }}
  />
</RouteStackProvider>

最佳实践

1. 路由层级: 保持路由深度在 3 层以内
2. SSR 支持: 使用 SSR 时会自动使用移动端模式避免水合不匹配
3. 性能优化: 避免在路由组件中执行耗时操作

相关组件

• MultiColumnLayout - 多列布局组件