React Router v6中useEffect设置动态标题，回退时显示旧值

问题根源 #

Chromium内核浏览器（Chrome、Edge）会缓存历史记录条目的页面标题，当通过浏览器回退按钮导航时，会直接读取缓存的标题，而非当前页面动态设置的标题。即便你的useEffect已经执行并修改了document.title，浏览器仍会显示历史缓存中的旧值。

具体修复步骤 #

1. 完善自定义Hook的依赖与路由监听 #

添加React Router的useLocation监听路由变化，确保路由切换（包括回退）时触发标题更新；同时给useEffect添加正确的依赖数组，避免不必要的重复执行。

2. 强制更新历史记录的标题 #

使用history.replaceState更新当前历史记录条目的标题，覆盖Chromium的缓存值，这样回退时浏览器会读取更新后的标题。

修改后的代码 #

import { useEffect, useContext } from 'react';
import { useLocation } from 'react-router-dom';
import { ThreadContext } from './path-to-your-ThreadContext'; // 替换为你的Context实际路径

export default function useDynamicTitle() {
  const { thread } = useContext(ThreadContext);
  const location = useLocation();

  useEffect(() => {
    const newTitle = `(${thread.totalUnreadMessages}) - chatTest`;
    document.title = newTitle;
    
    // 更新当前历史记录条目的标题，覆盖Chromium的缓存
    if (window.history.replaceState) {
      const currentState = window.history.state;
      window.history.replaceState(
        { ...currentState, title: newTitle },
        newTitle,
        location.pathname
      );
    }

    console.log("unread ", thread.totalUnreadMessages);
    console.log("title ", document.title);
  }, [thread.totalUnreadMessages, location]); // 仅在未读消息数或路由变化时触发更新
}

额外说明 #

• 原Hook的useEffect没有依赖数组，会在每次组件重渲染时执行，添加依赖数组后仅当未读消息数或路由变化时才触发更新，性能更优。
• 即使使用react-helmet或react-helmet-async，仍需要结合history.replaceState处理Chromium的标题缓存问题，因为这些库默认仅修改document.title，不会更新历史记录的缓存标题。
• Firefox和Safari没有这个缓存机制，所以之前在这两个浏览器中表现正常。

内容的提问来源于stack exchange，提问作者xvargr