antd pro 网页title取不到问题解决

星宇大前端

发布于 2022-11-07 14:31:18

7710

发布于 2022-11-07 14:31:18

文章被收录于专栏：大宇笔记

背景和问题描述：

项目使用 antd-design-pro v5，今天同事说他那边跳转时候发现网页的title 错误。

原因分析：

然后看了下antd pro 的title 切换机制，这事情是pro-layout 去做的。

先看一下basicLayout 文件，在切换页面的时候会触发

利用useDocumentTitle 去设置当前页面document title 。

然后看看这个 pageTitleInfo 是怎么取到的

var defaultPageTitleRender = function defaultPageTitleRender(pageProps, props) {
  var pageTitleRender = props.pageTitleRender;
  var pageTitleInfo = getPageTitleInfo(pageProps);

  if (pageTitleRender === false) {
    return {
      title: props.title || '',
      id: '',
      pageName: ''
    };
  }

  if (pageTitleRender) {
    var title = pageTitleRender(pageProps, pageTitleInfo.title, pageTitleInfo);

    if (typeof title === 'string') {
      return _objectSpread(_objectSpread({}, pageTitleInfo), {}, {
        title: title
      });
    }

    warning(typeof title === 'string', 'pro-layout: renderPageTitle return value should be a string');
  }

  return pageTitleInfo;
};

最后定位到核心代码如下：

/**
 * 获取关于 pageTitle 的所有信息方便包装
 *
 * @param props
 * @param ignoreTitle
 */

var getPageTitleInfo = function getPageTitleInfo(props, ignoreTitle) {
  var _props$pathname = props.pathname,
      pathname = _props$pathname === void 0 ? '/' : _props$pathname,
      breadcrumb = props.breadcrumb,
      breadcrumbMap = props.breadcrumbMap,
      formatMessage = props.formatMessage,
      title = props.title,
      _props$menu = props.menu,
      menu = _props$menu === void 0 ? {
    locale: false
  } : _props$menu;
  var pageTitle = ignoreTitle ? '' : title || '';
  var currRouterData = matchParamsPath(pathname, breadcrumb, breadcrumbMap);

  if (!currRouterData) {
    return {
      title: pageTitle,
      id: '',
      pageName: pageTitle
    };
  }

  var pageName = currRouterData.name;

  if (menu.locale !== false && currRouterData.locale && formatMessage) {
    pageName = formatMessage({
      id: currRouterData.locale || '',
      defaultMessage: currRouterData.name
    });
  }

  if (!pageName) {
    return {
      title: pageTitle,
      id: currRouterData.locale || '',
      pageName: pageTitle
    };
  }

  if (ignoreTitle || !title) {
    return {
      title: pageName,
      id: currRouterData.locale || '',
      pageName: pageName
    };
  }

  return {
    title: "".concat(pageName, " - ").concat(title),
    id: currRouterData.locale || '',
    pageName: pageName
  };
};

业务原因分析

最后分析出是因为 breadcrumb 和 breadcrumbMap 的原因得到的title 没有找到。

那么这个breadcrumb是怎么获得的呢？

分析出这个可以去单独配置：

我是没有配置，而且我的路由是写到本地，但是菜单是从后台去获取。

原因

获取title 是拿到当前路径，去breadcrumbMap 去匹配从而获取名称。因为是跳转页不在菜单里面，且没有定义breadcrumbMap。

那么breadcrumbMap 自动获取的是菜单，因此获取不到名称

解决方案

自定义 pageTitleRender 如果取不到名称，拿到路径去本地路由匹配获取。

 pageTitleRender: (props, defaultPageTitle) => {
      if (!getPageTitle(props, true)) {
        const localRoutes = (props as any).routes[0].routes;
        return `${localRoutes.find((item: any) => item.path === props.pathname).name} - ${
          props.title
        }`;
      }
      return defaultPageTitle;
    },

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-10-27，如有侵权请联系 cloudcommunity@tencent.com 删除

antd