React Router V7 踩坑指南

来一首_We_go2025-04-10 15:53

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