Remix

• remix-run/remixGitHubremix-run/remixremix-run/remix · 基于 React 的开发框架 · 内置 form 处理 · 类似 NextJS · loader -> Compoent -> action · serverBuildTarget · 默认 node-cjs笔记：Remix
  • 基于 React 的开发框架
  • 内置 form 处理
  • 类似 NextJS
• loader -> Compoent -> action
• serverBuildTarget
  • 默认 node-cjs
  • arc, cloudflare-pages, cloudflare-workers, deno, netlify, node-cjs, vercel,
• 参考
  • remix.run/blog/remix-vs-next

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

Packages@remix-run/nodenpm Package@remix-run/nodeNPM@remix-run/reactnpm Package@remix-run/reactNPM@remix-run/servenpm Package@remix-run/serveNPM@remix-run/devnpm Package@remix-run/devNPM

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>
  );
}

参考

• app/routes.ts
  • import { type RoutesConfig, route, layout, index } from "@react-router/dev/routes";
  • brookslybrand/route-convention-evolutionGitHubbrookslybrand/route-convention-evolution
    • Add support for routes.ts remix-run/react-router#11773GitHub PRremix-run/react-router#11773
    • @react-router/dev
• remix.run/docs/en/main/discussion/routes
• remix.run/docs/en/main/file-conventions/routes
• interactive-remix-routing-v2.netlify.app
• kiliman/remix-flat-routesGitHubkiliman/remix-flat-routes
  • v1 的 routing 结构
  • kiliman/remix-flat-routes#39GitHubkiliman/remix-flat-routes/discussions/39 Deprecate remix-flat-routes in favor of remix-hybrid-routes
• v1 和 v2 的 routing 有很大的不同

remix.config.js

• remix.run/docs/en/main/file-conventions/remix-config

vite

• remix-run/remix/templates/unstable-viteGitHub Fileremix-run/remix/templates/unstable-vite