Umi&React动态修改title标题

接上文：Uni&antd的ProLayout布局动态菜单实现及踩坑记录

在调整好菜单后，又发现一个问题，打开页面不显示标题，点击菜单的时候才会正常显示标题，再次点击当前菜单，标题又变的不太对了。

首次打开不显示标题

因为 umirc.ts 配置文件的 route 没有配置 title 配置后显示标题了：

routes: [
  {
    name: '首页',
    title: '首页',
    path: '/',
    icon: 'home',
    component: '@/pages/index',
  },
  ...
],

因为给 ProLayout 配置了 title ，点击菜单时标题会变成 route.title - ProLayout.title 的形式（如：首页 – 前端资源网）。

但是有一个问题，在当前页面点击当前菜单，标题会变成 route.title ，ProLayout.title 不见了（如：首页），首次打开页面，不点击菜单的时候也只显示 route.title。

因为在 menuItemRender 用的是 Link 可能有 bug ，使用下面的方法来避免重复加载刷新：

menuItemRender={(item, dom) => <div onClick={() => {
  if (item.path === location.pathname) {
    return;
  } else {
    history.push(item.path);
  }
}}>{dom}</div>}

注意这里的 history 是 Umi 的组件，需要引入一下：

import { history, Helmet } from 'umi';

这样只能避免重复刷新， title 还是有问题。

可以借助 <Helmet /> 动态修改页面的 title 标题（上面已经引入了）：

import React, { useState, useEffect } from 'react';

const { route, location } = props;
//获取当前路由
const [title, setTitle] = useState('首页 - 前端资源网);
useEffect(() => {
  const curRoute = _find(
    route.routes,
    (item) => item.path === location.pathname,
  );
  const title = curRoute
    ? `${curRoute.name} - 前端资源网`
    : '前端资源网';
  setTitle(title);
}, [location.pathname]);

这里需要用到 lodash 的 _find 组件，引入一下：

import _find from 'lodash/find';

如果没有安装 lodash 依赖，安装一下：

npm i --save-dev lodash
// Or
yarn add lodash

将 <Helmet /> 放在 <ProLayout /> 标签内即可，代码如下：

<ProLayout>
  <Helmet>
    <title>{title}</title>
  </Helmet>
  ...
</ProLayout>

这样就可以动态修改页面的 title 了。

未经允许不得转载：w3h5 » Umi&React动态修改title标题