Rails 7 + esbuild + React 切换页面时闪烁

Question

Rails 7 + esbuild + React 切换页面时闪烁

3

我有一个使用React和esbuild的新Rails项目。设置非常标准：

<div
  id="user_edit_page"
  data-controller="user-edit-page"
>
</div>

然后，a:

import { Controller } from "@hotwired/stimulus"
import React from "react";
import { createRoot } from "react-dom/client";
import UserEditPage from "../components/UserEditPage";

// Connects to data-controller="user-edit-page"
export default class extends Controller {
  connect() {
    const app = document.getElementById("user_edit_page");
    createRoot(app).render(<UserEditPage />)
  }
}

当我在页面之间导航时，会出现非常烦人的闪烁。感觉Rails正在提供缓存响应，然后重新初始化React组件，然后重新呈现。

我认为可以禁用turbolinks来解决这个问题，但我想知道是否有更好的Rails方式让事情按照预期工作。

- MB.

只是一个猜测，但你可以尝试使用hydrateRoot(app, <UserEditPage />)代替createRoot(app).render(<UserEditPage />)吗？hydrateRoot在react-dom/client中。 - acdcjunior

我恐怕这没有任何区别。 - MB.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David · Accepted Answer

您可以在布局的<head>中禁用turbolinks缓存。 <meta name="turbolinks-cache-control" content="no-cache"> 这是其中一种选择，或者您可以创建一个加载屏幕机制，在渲染之前等待页面加载。

您使用的React版本是什么？您是否使用React-Router（如果是，则是什么版本）？您可以在useEffect钩子中创建一个异步函数来等待组件加载后再进行渲染吗？这将防止闪烁。

似乎Ruby turbolinks和React Routing彼此不兼容，因为默认情况下，Ruby链接将在Rails中进行完整的页面刷新。

编辑：根据版本的不同，您可能需要将turbolinks-cache-control更改为turbo-cache-control