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.titleProLayout.title 不见了(如:首页),首次打开页面,不点击菜单的时候也只显示 route.title

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

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

注意这里的 historyUmi 的组件,需要引入一下:

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标题

赞 (1)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)