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-Web前端开发资源网 » Umi&React动态修改title标题
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-07-07)，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录