接上文: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标题