Ionic React v7中如何动态修改页面标题及元数据

一、动态修改页面标题 #

方案1：单个页面组件内设置 #

在每个页面组件的useEffect钩子中直接修改document.title，组件挂载时生效：

import { useEffect } from 'react';

const HomePage = () => {
  useEffect(() => {
    document.title = '首页 - 我的应用';
  }, []);

  return (
    // 页面内容
  );
};
export default HomePage;

方案2：全局路由监听统一处理 #

如果需要统一管理所有页面的标题，可在根组件中监听路由变化，根据路径映射设置标题：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const App = () => {
  const location = useLocation();

  useEffect(() => {
    // 配置路径与标题的映射关系
    const titleMap = {
      '/': '首页',
      '/about': '关于我们',
      '/profile': '个人中心'
    };
    // 拼接默认后缀，也可根据需求调整
    document.title = `${titleMap[location.pathname] || '默认标题'} - 应用名称`;
  }, [location.pathname]);

  return (
    // 你的路由容器组件
  );
};
export default App;

二、Google Analytics 页面浏览量统计 #

单页应用路由切换不会触发页面刷新，需手动调用GA的页面上报接口：

步骤1：确认GA基础配置 #

确保index.html中已正确引入GA脚本（以gtag.js为例）：

<!-- index.html 中的GA脚本 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

步骤2：路由变化时上报页面 #

在根组件中监听路由变化，每次路径更新时触发GA的页面统计：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const App = () => {
  const location = useLocation();

  useEffect(() => {
    // 上报当前页面路径
    window.gtag('config', 'G-XXXXXXX', {
      page_path: location.pathname + location.search
    });
  }, [location.pathname, location.search]);

  return (
    // 你的路由容器组件
  );
};
export default App;

如果使用的是旧版analytics.js，替换为以下代码：

useEffect(() => {
  window.ga('set', 'page', location.pathname + location.search);
  window.ga('send', 'pageview');
}, [location.pathname, location.search]);

内容的提问来源于stack exchange，提问作者Bryant Makes Programs