React Router V7 踩坑指南

react router 中取消严格模式渲染

react router 在作为框架使用的时候，默认是启用的严格模式进行渲染的，而且文件的入口默认是 react router 内部生成的。

但是 react router 提供了我们自定义配置文件的方式去更改 client 入口

建议在没有任何问题产生的情况下，尽量使用 react 的严格模式，这样可以防止一些简单的错误。

在生产模式下，react 是不会启动严格模式的，即使设置了。

默认情况下，React Router 将为您处理客户端上的应用。您可以使用以下命令显示默认的入口客户端文件：

bash 复制代码

react-router reveal

这样就会生成两个文件

entry.client.tsx
entry.server.tsx

entry.client.tsx (默认的内容)

tsx 复制代码

import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { HydratedRouter } from "react-router/dom";

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <HydratedRouter />
    </StrictMode>
  );
});

这里可以看到默认使用的是严格模式，加 react/client 的水和作用进行渲染的

在 wujie 当中水和作用会因为 wujie 在未完成的时候会去访问 window 对象，导致浏览器控制台报错

这里直接变为 react 的 createRoot 的方式使用 HTML 渲染。

修改后的代码

tsx 复制代码

import { startTransition, StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { HydratedRouter } from "react-router/dom";

startTransition(() => {
  createRoot(document).render(
    <StrictMode>
      <HydratedRouter />
    </StrictMode>
  );
});

当然这里我们也可以选择取消严格模式

解决控制台会出现提示信息

Hey developer 👋. You can provide a way better UX than this when your app is loading JS modules and/or running clientLoader functions. Check out remix.run/route/hydra...

github issues 地址

解决方法

在 root.tsx 中加入

tsx 复制代码

export function HydrateFallback() {
  return <p>Loading </p>;
}