umi react修改网页title

1. document.ejs 默认模板

document.ejs模板可以为umi.js项目配置最为基本的配置之一，可以理解为index.html的入口。这是整个react的项目的根组件挂载点

在Head的title标签中可以更改

ps: 在document.ejs获取路由动态修改title:

if (document.URL.includes('/questionnaire')) {
  document.getElementsByTagName('title')[0].innerText = `myTitle`;
}

2. 在react中可以在组件的componentDidMount生命周期中设置

document.title = `myTitle`;

3. Helmet

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        

            
                
                
                
            
            ...
        
    );
  }
};

4. @umijs/plugin-layout 修改title

/**
 * https://umijs.org/zh-CN/plugins/plugin-layout
 * pageTitleRender?: WithFalse<(props: GetPageTitleProps, defaultPageTitle?: string, info?: {
        title: string;
        id: string;
        pageName: string;
    }) => string>;
 */
pageTitleRender: (a, defaultPageTitle, c) => {
  return `${defaultPageTitle} - myTitle`;
},

ps: GetPageTitleProps 里会返回当前路径,也可动态根据路由修改title

ps: 在umi的defaultSettings中有一个title 也会影响到网页的标题

/**
  * 设置为 false，在 layout 中只展示 pageName，而不是 pageName - title
  *
  * @name Layout 的 title，也会显示在浏览器标签上
  */
    title: string | false;