实战：用户列表与详情

本教程使用模拟数据，不新增框架请求封装。版本按 @vlian/app@0.0.11。

1. 创建精简项目

pnpm create selrux users-demo --template minimal
cd users-demo

2. 列表页

创建 src/pages/users/index.tsx：

import { Link } from '@tanstack/react-router';

/** 演示用户列表（模拟数据）。 */
const USERS = [
  { id: '1', name: 'Alice' },
  { id: '2', name: 'Bob' },
];

export default function UsersPage() {
  return (
    <main>
      <h1>用户</h1>
      <ul>
        {USERS.map((u) => (
          <li key={u.id}>
            <Link to="/users/$id" params={{ id: u.id }}>
              {u.name}
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

3. 详情页（动态路由）

创建 src/pages/users/[id].tsx：

import { Link, useParams } from '@tanstack/react-router';

/** 用户详情：读取动态参数 $id。 */
export default function UserDetailPage() {
  const { id } = useParams({ from: '/users/$id' });
  return (
    <main>
      <h1>用户 {id}</h1>
      <Link to="/users">返回列表</Link>
    </main>
  );
}

4. 自定义布局（可选）

src/layouts/default.tsx：

import type { ReactNode } from 'react';

/** 应用默认布局。 */
export default function Layout({ children }: { children?: ReactNode }) {
  return (
    <div>
      <header>Users Demo</header>
      {children}
    </div>
  );
}

登录类页面可 export const layout = 'blank'。

5. 生命周期（演示）

src/app.tsx 可加入 bootstrap / beforeNavigate。示例中的 sessionStorage「登录」仅为演示，不是生产认证。

6. 构建

pnpm run typecheck
pnpm run build
pnpm run preview

部署到静态服务器时注意 SPA 回退；若使用子路径，设置 vite.base（绝对路径前缀）。见 应用部署。

完整壳路径请另见 完整壳指南，勿与本精简教程混为一步。