Remix Web框架¶

# 方式一：使用React Router v7（推荐，Remix的继任者）
npx create-react-router@latest my-app
cd my-app
npm install
npm run dev  # → http://localhost:5173

# 方式二：传统Remix
npx create-remix@latest my-remix-app
cd my-remix-app
npm run dev

// app/routes/users.tsx — /users页面
import type { LoaderFunctionArgs } from 'react-router'
import { useLoaderData } from 'react-router'

// Loader：在服务端加载数据
export async function loader({ request }: LoaderFunctionArgs) {
  const users = await db.user.findMany()  // 服务端查数据库
  return { users }  // 传给组件
}

// 组件
export default function UsersPage() {
  const { users } = useLoaderData<typeof loader>()  // 获取loader数据

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

// app/routes/login.tsx
import type { ActionFunctionArgs } from 'react-router'
import { Form, useActionData } from 'react-router'

// Action：处理POST请求
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData()
  const email = formData.get('email') as string
  const password = formData.get('password') as string

  // 验证
  if (!email || !password) {
    return { error: '请填写所有字段' }
  }

  // 登录逻辑...
  return redirect('/dashboard')
}

export default function LoginPage() {
  const actionData = useActionData<typeof action>()

  return (
    <Form method="post">  {/* Remix的Form组件，自动渐进增强 */}
      {actionData?.error && <p style={{color: 'red'}}>{actionData.error}</p>}
      <input name="email" type="email" placeholder="邮箱" />
      <input name="password" type="password" placeholder="密码" />
      <button type="submit">登录</button>
    </Form>
  )
}

// app/routes/dashboard.tsx — 父路由（布局）
import { Outlet, NavLink } from 'react-router'

export default function Dashboard() {
  return (
    <div style={{ display: 'flex' }}>
      <nav>
        <NavLink to="/dashboard/overview">概览</NavLink>
        <NavLink to="/dashboard/settings">设置</NavLink>
      </nav>
      <main>
        <Outlet />  {/* 子路由在这里渲染 */}
      </main>
    </div>
  )
}

// app/routes/dashboard.overview.tsx — 子路由
export default function Overview() {
  return <h2>仪表盘概览</h2>
}

// 每个路由都可以有自己的错误边界
export function ErrorBoundary() {
  const error = useRouteError()
  return (
    <div>
      <h1>出错了</h1>
      <p>{error instanceof Error ? error.message : '未知错误'}</p>
    </div>
  )
}

import { useFetcher } from 'react-router'

function LikeButton({ postId, liked }: { postId: string; liked: boolean }) {
  const fetcher = useFetcher()
  // 乐观更新：不等服务器响应就先更新UI
  const optimisticLiked = fetcher.formData
    ? fetcher.formData.get('liked') === 'true'
    : liked

  return (
    <fetcher.Form method="post" action={`/posts/${postId}/like`}>
      <input type="hidden" name="liked" value={(!optimisticLiked).toString()} />
      <button>{optimisticLiked ? '❤️' : '🤍'}</button>
    </fetcher.Form>
  )
}

import { defer } from 'react-router'
import { Suspense } from 'react'
import { Await } from 'react-router'

export async function loader() {
  const fastData = await getFastData()  // 快速数据立即返回
  const slowDataPromise = getSlowData() // 慢数据延迟加载

  return defer({
    fastData,
    slowData: slowDataPromise,  // Promise，边加载边渲染
  })
}

export default function Page() {
  const { fastData, slowData } = useLoaderData<typeof loader>()

  return (
    <div>
      <h1>{fastData.title}</h1>  {/* 立即显示 */}
      <Suspense fallback={<p>加载中...</p>}>
        <Await resolve={slowData}>  {/* 数据就绪后显示 */}
          {(data) => <div>{data.content}</div>}
        </Await>
      </Suspense>
    </div>
  )
}

npx create-react-router@latest  # 创建项目
npm run dev                      # 开发
npm run build                    # 构建

# 路由文件约定（点号分隔表示嵌套）
# routes/index.tsx        → /
# routes/about.tsx        → /about
# routes/blog.$slug.tsx   → /blog/:slug
# routes/dashboard.tsx    → /dashboard (父)
# routes/dashboard._index.tsx → /dashboard/ (默认子)