React location.pathname to (自定义)标题

基础概念

location.pathname 是 React Router 库中的一个属性，它表示当前路由的路径名。例如，在 URL https://example.com/home 中，location.pathname 的值将是 /home。

将 location.pathname 映射到自定义标题是一种常见的做法，用于根据当前页面动态更新浏览器标题，从而提高用户体验。

类型与应用场景

基于路由的标题：根据当前路由路径设置标题。
基于内容的标题：根据页面具体内容（如文章标题）设置标题。

应用场景包括但不限于：

博客网站：根据文章标题动态更新页面标题。
电商平台：根据商品类别或详情页内容更新标题。
管理后台：根据不同管理模块设置不同的标题。

实现方法

以下是一个简单的示例，展示如何在 React 应用中根据 location.pathname 设置自定义标题：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <TitleHandler />
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        {/* 其他路由 */}
      </Switch>
    </Router>
  );
};

const TitleHandler = ({ location }) => {
  let title = '默认标题';

  switch (location.pathname) {
    case '/home':
      title = '首页';
      break;
    case '/about':
      title = '关于我们';
      break;
    // 其他路径处理
    default:
      break;
  }

  document.title = title;

  return null;
};

const Home = () => <h1>首页内容</h1>;
const About = () => <h1>关于我们</h1>;

export default App;

遇到的问题及解决方法

问题：标题没有动态更新。

原因：

TitleHandler 组件没有正确接收 location 属性。
document.title 设置位置不正确或时机不对。

解决方法：

确保 TitleHandler 组件通过高阶组件（如 withRouter）或 React Router v6 的 useLocation 钩子正确接收 location 属性。
在组件挂载或路由变化时设置 document.title。

示例代码（使用 React Router v6 和 useLocation 钩子）：

import React from 'react';
import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* 其他路由 */}
      </Routes>
    </Router>
  );
};

const TitleHandler = () => {
  const location = useLocation();
  let title = '默认标题';

  switch (location.pathname) {
    case '/home':
      title = '首页';
      break;
    case '/about':
      title = '关于我们';
      break;
    // 其他路径处理
    default:
      break;
  }

  React.useEffect(() => {
    document.title = title;
  }, [location.pathname]);

  return null;
};

const Home = () => <h1>首页内容</h1>;
const About = () => <h1>关于我们</h1>;

export default App;