如何设置不同的网页标题(react)

news/2024/7/15 18:40:21 标签: react.js, 前端, 前端框架

通常,当我们写一个h5或者网站时,需要根据页面的业务来自定义网页标题。
这个本来是在入口html文件中设置的,但唯一。

<head>
  <meta charset="UTF-8" />
  <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" />
  <title>载入中...</title>
</head>

那么,如何改变呢?
一、写一个组件更改标题(jsx文件)

import React, { useEffect } from "react"

const DefaultElement = ({ element: Component, meta }: any) => {
    //这个组件接受两个参数,第一个为路由中本来就要用的组件,第二个是自定义标题。
    useEffect(() => {
        if (meta.title) {
            document.title = `${meta.title}`
        } else {
            document.title = '载入中...'
        }
    }, [meta])
    return (
        <Component />
    )
}

export default DefaultElement

二、在路由ts文件中引用这个组件。

{
      path: '/appraisal',
      element: <DefaultElement element={A} meta={{ title: "我的测评" }} />
    },

http://www.niftyadmin.cn/n/5243538.html

相关文章

Vue3计算属性与监听属性和生命周期

文章目录 一、计算属性与监视1、computed函数2、watch函数3、watchEffect函数 二、生命周期1、与 2.x 版本生命周期相对应的组合式 API2、新增的钩子函数3、代码实例 一、计算属性与监视 1、computed函数 与computed配置功能一致只有getter有getter和setter 2、watch函数 与…

Spark常见算子汇总

创建RDD 在Spark中创建RDD的方式分为三种: 从外部存储创建RDD从集合中创建RDD从其他RDD创建 textfile 调用SparkContext.textFile()方法&#xff0c;从外部存储中读取数据来创建 RDD parallelize 调用SparkContext 的 parallelize()方法&#xff0c;将一个存在的集合&…

avue-crud中时间范围选择默认应该是0点却变成了12点

文章目录 一、问题二、解决三、最后 一、问题 在avue-crud中时间范围选择&#xff0c;正常默认应该是0点&#xff0c;但是不知道怎么的了&#xff0c;选完之后就是一直是12点。具体问题如下动图所示&#xff1a; <template><avue-crud :option"option" /&g…

探索HarmonyOS_开发软件安装

随着华为推出HarmonyOS NEXT 宣布将要全面启用鸿蒙原声应用&#xff0c;不在兼容安卓应用&#xff0c; 现在开始探索鸿蒙原生应用的开发。 HarmonyOS应用开发官网 - 华为HarmonyOS打造全场景新服务 鸿蒙官网 开发软件肯定要从这里下载 第一个为微软系统(windows)&#xff0c;第…

单例模式【C#】

只能生一个儿子。 文件操作只能一个单例去操作。 1static&#xff1a; static的特点是&#xff0c;不需要new就能使用。即使派生了&#xff0c;也是使用静态的对象。 public class SingleObject {//创建 SingleObject 的一个对象private static SingleObject instance new…

STM32——电动车报警器

项目设计 // 如果检测到 PA4 被拉低&#xff08;小偷偷车&#xff09;&#xff0c;并且警报模式打开 // 则将 PB7 拉低&#xff0c;继电器通电&#xff0c;喇叭一直响 // 如果检测到 PA5 被拉高&#xff08;按键 A 按下&#xff09;&#xff0c;设定为开启警报模式 // 则将…

【Flink on k8s】- 3 - Kubernetes 中的关键概念

目录 1、容器 VS 虚拟机 2、Kubernetes 架构 2.1 Master节点 2.2 Node 节点 3、Kubernetes 的基本对象

SAM+使用SAM应用数据集完成分割

什么是SAM&#xff1f; SAM(Segment Anything Model&#xff09;是由 Meta 的研究人员团队创建和训练的深度学习模型。在 Segment everything 研究论文中&#xff0c;SAM 被称为“基础模型”。 基础模型是在大量数据上训练的机器学习模型&#xff08;通常通过自监督或半监督学习…