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

react项目修改修改document.title浏览器标题名字，网上有很多介绍方案，感觉不够简洁方便，直接上我的方案吧。
此文只介绍react-router-dom的V5 和 V6版本处理方案，react-router 我还没写的

react-router-dom路由引用和使用方式，点我另一个博客

1. react-router-dom V5 版本处理方案：

直接在Route 标签的render函数处理。不要在Route的事件里面写，没一个生效的。

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import 'antd-mobile/dist/antd-mobile.css';

import routers from '../routers'; //路由文件对象
import './App.less'; //全局公用样式

const App = () => {
  return (
    <Router>
      <Switch>
        {routers.map((item, index) => (
          <Route
            key={index}
            exact
            path={item.path}
            render={() => {
              document.title = item.title;
              return <item.component />;
            }}
          />
        ))}
      </Switch>
    </Router>
  );
};

export default App;

routers.js

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

const routers = [
  {
    title: '中国眼底病患者管理项目',
    path: '/',
    component: HandleRouter,
  },
  // ... 其他路由
]
 
export default routers;

补充截图：

其他方式：

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

2. 安装插件

umijs：有Helmet这个插件API ，专门用来自定义页面头部

下班了，下次再写，先记着~~~