乐趣区

关于react.js:Remix-1150-变化为-v2-预准备

jiezi

Remix 自我介绍

Build Better Websites. Create modern, resilient user experiences with web fundamentals.

Remix 1.15.0 公布日期

2023-04-01

更新目录

  • 更新文章：为 v2 预筹备
  • 文件系统路由约定
  • 元路由发生变化
  • 谬误边界发生变化
  • 钩子函数：usetransition、useFetcher 属性变量展平
  • formMethod 的办法大小写更改
  • route 模块的 link/links 产生了变动
  • 构建目录命名发生变化
  • 服务端构建产生了变动
  • 同时在开发服务器中开始 UI 调用 css 相干库开始反对 css modules, 提取，tailwind 反对，postcss 反对。

remix 开发版分支

  • 开发版文档分支
  • Github dev 分支

创立 Remix 配置文件变动

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {ignoredRouteFiles: ["**/.*"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "build/index.js",
  // publicPath: "/build/",
  future: {
    v2_errorBoundary: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
};

future 中更：

配置 阐明
errorBoundary 新的谬误边界
meta 新的 meta 解决形式
normalizeFormMethod 一般的 Form 办法
routeConvention 路由转换（新的路由转换）

路由约定

新版的路由约定，应用 点路由宰割符号 的形式，不在反对文件夹嵌套的模式。index 文件路由改为 _index 路由，布局路由应用 _ 开始的前缀代替__ 双下划线开始的前缀路由布局路由。

meta

在 v1 中，meta 函数返回对象，然而在 v2 中放回数组。同时对应的类型产生了变动。

谬误边界解决

v2 中只有了 ErrorBoundary 组件，处理错误，同时配合 useRouteError 钩子函数，isRouteErrorResponse 判断谬误。

transition、fetcher

为了更加简略的曾经 submission 字段移除，更加间接的应用 formData/formMethod/formAction/type

import {useNavigation} from "@remix-run/react";

function SomeComponent() {let navigation = useNavigation();

  navigation.formData;
  navigation.formMethod;
  navigation.formAction;
  navigation.type;
  
  navigation.formMethod === "POST";
}

import {useNavigation} from "@remix-run/react";

function SomeComponent() {let fetcher = useTransition();

  fetcher.formData;
  fetcher.formMethod;
  fetcher.formAction;
  fetcher.type;
}

图像地址应用 imageSrcSet/imageSizes

应用小驼峰形式

export const links: V2_LinksFunction = () => {
  return [
    {
      rel: "preload",
      as: "image",
      imageSrcSet: "...",
      imageSizes: "...",
    },
  ];
};

构建地址

  • 客户端
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {assetsBuildDirectory: "./public/build", // 全新的字段};
  • 服务端
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {serverBuildDirectory: "./build/index.js", // 构建到新的 index.js 文件};

第三方服务器和 css 库的反对

Remix 反对在配置文件中配置对第三方服务器的解决状况：

  • arc
  • cloudflare-pages
  • cloudflare-workers
  • deno
  • netlify
  • node-cjs
  • vercel

css 模块

  • css module
  • 原生提取
  • tailwind
  • postcss

小结

本次改变并不大，次要针对配置文件，路由书写范式，谬误边界对立解决，钩子函数属性深层次简化，以及 css 款式反对。

退出移动版