React SPA项目中动态设置页面Title的方法

作者：晴川

时间：2026-10-22

本文介绍在React单页应用中解决页面标题不随路由切换而更新的问题。通过在路由配置中增加title属性，并在路由渲染组件中读取该属性并赋值给document.title，实现页面标题的动态变化，提升用户体验。

文章目录

React SPA页面标题动态更新问题

在基于React构建的单页应用（SPA）中，页面标题通常硬编码在入口文件index.html里。这导致在路由切换不同页面时，浏览器标签页的标题不会随之改变。因此，需要一种机制使页面标题能够根据当前路由动态更新。

路由配置中添加标题属性

首先，需要在定义路由配置时，为每个路由对象添加一个自定义的title属性，用于指定该页面对应的标题内容。


  {
    path: "/regularinvestment",
    component: Loadable({
      loader: () => import('./../../business/Regularinvestment/index'),
      loading: PageLoading
    }),
    title: "这是自定义的标题"
  }

路由渲染时动态设置标题

接着，在路由渲染逻辑中（通常位于index.js或路由配置文件），获取每个路由配置中定义的title属性，并将其赋值给document.title，从而设置当前页面的标题。


  const RouteWithSubRoutes = route => {
    return (
      <Route
        exact
        path={route.path}
        render={props => {
          document.title = route.title || "默认title";
          return <route.component {...props} routes={route.routes}></route.component>
        }}
      />
    );
  };
  
  export default () => {
    return allRouters.map((route, i) => {
      return <RouteWithSubRoutes key={i} {...route}/>
    })
  };

以上即为在React项目中实现动态页面标题的核心思路与操作步骤，希望能为相关开发工作提供参考。