跳到主要内容

Remix

  • remix-run/remix
    • 基于 React 的开发框架
    • 内置 form 处理
    • 类似 NextJS
  • loader -> Compoent -> action
  • serverBuildTarget
    • 默认 node-cjs
    • arc, cloudflare-pages, cloudflare-workers, deno, netlify, node-cjs, vercel,
  • 参考
警告
信息
  • 框架耦合程度: remix > nextjs > vite
    • nextjs 13 - 增加了 app、server action 后复杂度大大提升
npm add @remix-run/node @remix-run/react @remix-run/serve
npm add -D @remix-run/dev

npx create-remix@latest


npx @remix-run/dev routes --config vite.remix.config.ts
# 只想用 remix 的 filebase routing 结构
pnpm dlx @remix-run/dev routes --config vite.remix.config.ts --json

routes

  • app/root.tsx - 顶层 layout
  • 路由规则 app/routes
  • SEGMENT.tsx 或 目录 SEGMENT/_index.tsx
  • A.B.tsx 或者 A/B.tsx
  • $var - 路径上变量
  • exports - Route Module
    • loader - 在 GET 请求时执行
    • action - 在 DELETE, PATCH, POST, PUT 请求时执行
    • clientLoader
    • clientAction
    • default - 组件
    • headers
    • meta
    • links
    • ErrorBoundary
    • handle - 路由元数据信息
    • HydrateFallback - 在 clientLoader 时显示
    • shouldRevalidate
  • *.client.tsx,*.server.tsx
export async function loader({ request }) {
return getProjects();
}

export async function action({ request }) {
const form = await request.formData();
return createProject({ title: form.get('title') });
}

export default function Projects() {
const projects = useLoaderData();
const { state } = useTransition();
const busy = state === 'submitting';

return (
<div>
{projects.map((project) => (
<Link to={project.slug}>{project.title}</Link>
))}

<Form method='post'>
<input name='title' />
<button type='submit' disabled={busy}>
{busy ? 'Creating...' : 'Create New Project'}
</button>
</Form>
</div>
);
}

参考

remix.config.js

vite