React页面加载时无延迟修改页面标题的方法

你遇到的延迟问题根源在于：useEffect(() => {}, []) 是组件挂载完成后才执行，页面跳转时组件渲染完毕才会修改标题，自然会有滞后；react-helmet 在客户端渲染场景下，也是基于组件渲染周期更新DOM，所以同样存在延迟。以下是几个直接解决的方案：

方案1：路由加载阶段提前设置标题（react-router v6+） #

利用路由的 loader 函数，在组件开始加载前就修改标题，这是最直接的无延迟方案：

// 路由配置文件
import { createBrowserRouter } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
    loader: () => {
      document.title = '首页';
      return null;
    }
  },
  {
    path: '/about',
    element: <About />,
    loader: () => {
      document.title = '关于我们';
      return null;
    }
  }
]);

loader 会在路由匹配后、组件渲染前执行，标题会和页面跳转同步更新。

方案2：监听路由变化，全局统一处理 #

通过路由元信息配置标题，在根组件监听路由切换，一旦路径变化就立刻更新标题：

1. 先给路由添加标题元信息：

// 路由配置数组
const routes = [
  { path: '/', element: <Home />, meta: { title: '首页' } },
  { path: '/user', element: <User />, meta: { title: '用户中心' } }
];

2. 在根组件中监听路由变化：

import { useLocation, Routes, Route } from 'react-router-dom';

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

  // 路由切换时立即更新标题
  React.useEffect(() => {
    const matchedRoute = routes.find(route => route.path === location.pathname);
    if (matchedRoute?.meta?.title) {
      document.title = matchedRoute.meta.title;
    }
  }, [location.pathname]);

  return (
    <Routes>
      {routes.map(route => (
        <Route key={route.path} {...route} />
      ))}
    </Routes>
  );
}

这种方式不需要在每个页面写重复代码，维护更方便。

方案3：跳转触发时直接设置标题 #

如果是通过按钮等交互触发跳转，可以在跳转前先修改标题：

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  const goToAbout = () => {
    // 先改标题，再跳转
    document.title = '关于我们';
    navigate('/about');
  };

  return <button onClick={goToAbout}>去关于页</button>;
}

这种方式适合需要动态生成标题的场景（比如带参数的页面标题）。

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