React更改document.title浏览器标题名字react-router-dom V6路由处理方案

react项目修改修改document.title浏览器标题名字
此文只介绍react-router-dom的 V6 版本 处理方案

V6 处理方案：

方案一： 组件外封装一层父组件

思路：每个组件外层包一层父组件，父组件处理document.title，子组件显示页面

• 在Route 标签的事件钩子函数处理，v6 会显示最后一条数据，无用（v5 压根没有这些事件钩子）
• onMounted、onEnter、onBeforeMount等事件都会在初始化时候一次性执行完毕，切换路由不执行

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

// 封装一层 专门负责显示页面标题
const DomTitle = ({ item }) => {
  document.title = item.title;
  return <item.component />
}

const App = () => {
  return (
    <Router>
      <Routes>
        {routers.map((item, index) => {
          return (
            <Route
              key={`routers${index}`}
              exact
              path={item.path}
              element={<DomTitle item={item} />}
              // onMounted、onEnter、onBeforeMount等事件都会在初始化时候执行，切换路由不执行
            />
          );
        })}
      </Routes>
    </Router>
  );
};

export default App;

routers.js

import HandleRouter from "../pages/handleRouter";

const routers = [
  {
    title: '测试title',
    path: '/',
    component: HandleRouter,
  },
  // ... 其他路由
]
 
export default routers;

方案二： 单个组件内设置，很笨，但是有效，不建议用

单个组件内设置：document.title=“名字”

  useEffect(() => {
    document.title = '名字';
  }, [])

方案三： 使用插件，没啥技术含量

比如：umijs：有Helmet这个插件API ，专门用来自定义页面头部
… 其他插件自己摸索

---

此文只介绍react-router-dom的V6 版本处理方案

拓展：

• react-router-dom v6 版本使用内容详解: 点我另一个博客
• react-router-dom路由创建和使用方式：点我另一个博客
• V5 react-router-dom 版本处理方案：点我另一个博客
• react-router – v4后就没人用了，官方推荐react-router-dom 点我另一个博客

---

注意react-router-dom V5 和 V6略有不同。

若对你有帮助，随手点个赞吧。到处结束，有问题留言~~