如何禁用Electron窗口在浏览器历史导航时的标题自动更新？

这个坑我之前踩过！Electron默认会自动同步页面<title>标签的内容到窗口标题，哪怕你初始化窗口时已经设置了title属性也没用。当你用react-router-dom的goBack/goForward做历史导航时，Electron会触发页面导航相关的事件，自动去读取当前页面的<title>——而你的HTML文件里没定义这个标签，所以窗口标题就直接空了。

给你两个靠谱的解决方案：

方案一：主进程拦截标题更新事件 #

在主进程里监听窗口webContents的did-update-title事件，一旦Electron试图更新标题，我们就强制把它设置回我们想要的值（比如你的app.name，或者根据路由动态生成的标题）。

代码示例：

// 窗口创建完成后添加这段代码
appWindow.webContents.on('did-update-title', (event, newTitle) => {
  // 这里可以固定设置为初始标题，也可以通过IPC从渲染进程获取当前页面的自定义标题
  appWindow.setTitle(app.name);
});

这个方法的好处是完全在主进程控制，不需要修改渲染进程的代码，适合想要统一管理窗口标题的场景。

方案二：渲染进程主动维护页面标题 #

既然Electron是同步页面的<title>，那我们就在React路由变化时主动设置document.title，让Electron同步到窗口标题的是我们自定义的值。

可以用react-router-dom的useLocation钩子监听路由变化：

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function App() {
  const location = useLocation();

  useEffect(() => {
    // 根据当前路由路径设置对应的标题，或者固定为你的应用名称
    const pageTitle = getTitleFromPath(location.pathname); // 你可以自定义这个函数
    document.title = pageTitle || app.name;
  }, [location]);

  // ...你的组件代码
}

这个方法更灵活，可以根据不同路由页面设置不同的标题，适合需要页面级自定义标题的场景。

两种方法都能解决你的问题，选哪种看你的需求就行～

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