umi-React移动端如何根据路由来改变页面html中的title

在Umi中，可以使用title属性在路由配置中指定页面的标题，并利用@umijs/plugin-title插件来自动更改页面的<title>标签。

首先，确保安装了@umijs/plugin-title插件：

npm install @umijs/plugin-title --save

然后，在.umirc.ts或config/config.ts中配置插件：

export default {
  plugins: [
    ['@umijs/plugin-title', {
      defaultTitle: '你的默认标题',
    }],
  ],
};

接下来，在路由配置中为每个页面设置title属性：

// .umirc.ts 或 config/config.ts
export default {
  routes: [
    {
      path: '/',
      component: 'pages/index',
      title: '首页',
    },
    {
      path: '/about',
      component: 'pages/about',
      title: '关于我们',
    },
    // 其他路由配置
  ],
};

插件会自动根据当前路由的title属性来设置页面的<title>。

如果需要在页面组件内动态修改标题，可以使用useTitle钩子：

// pages/about.tsx
import { useTitle } from 'umi';
 
export default function AboutPage() {
  useTitle('动态标题');
  return (
    <div>
      <h1>关于我们</h1>
      {/* 页面内容 */}
    </div>
  );
}

useTitle钩子会自动更新页面标题为传入的字符串。