React JS中如何根据路由/页面设置不同的标签页标题

直接在App.js里通过监听路由变化，用一个统一函数处理所有页面的标题设置，不用额外装包，也不用在每个组件写useEffect：

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

// 统一处理标题的函数
const updatePageTitle = (location) => {
  const { pathname, search } = location;
  let pageTitle = '我的应用';

  // 按路径/参数匹配标题
  switch (pathname) {
    case '/':
      pageTitle = '首页';
      break;
    case '/profile':
      pageTitle = '个人中心';
      break;
    case '/post':
      // 处理路径参数（比如/post/123）
      const postId = pathname.split('/')[2];
      if (postId) pageTitle = `文章详情 - ${postId}`;
      break;
    case '/shop':
      // 处理查询参数（比如/shop?tag=electronics）
      const params = new URLSearchParams(search);
      const tag = params.get('tag');
      pageTitle = tag ? `商品列表 - ${tag}` : '商品列表';
      break;
    default:
      pageTitle = '404 - 页面不存在';
  }

  document.title = pageTitle;
};

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

  // 路由变化时自动更新标题
  useEffect(() => {
    updatePageTitle(location);
  }, [location]);

  // 你的路由组件
  return (
    {/* 这里放你的<BrowserRouter>、<Routes>等路由结构 */}
  );
}

export default App;

方案说明 #

• 无需额外依赖：仅使用React Router自带的useLocation和React内置的useEffect，完全符合要求
• 单一函数管控逻辑：所有页面的标题规则都集中在updatePageTitle里，不用在各个组件重复编写标题设置代码
• 支持参数解析：如果需要获取类似useParams的路径参数，直接通过location.pathname拆分即可；查询参数用URLSearchParams解析，效果和useSearchParams一致
• 全局自动触发：只要路由切换，useEffect就会自动调用标题函数，更新标签页标题

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