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

通常,当我们写一个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: "我的测评" }} />
    },

相关推荐

  1. 如何设置不同网页标题react

    2023-12-07 09:24:02       55 阅读
  2. vue和react使用上不同

    2023-12-07 09:24:02       54 阅读
  3. React vs React Native写法上不同

    2023-12-07 09:24:02       31 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-07 09:24:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-07 09:24:02       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-07 09:24:02       82 阅读
  4. Python语言-面向对象

    2023-12-07 09:24:02       91 阅读

热门阅读

  1. mvn site 命令

    2023-12-07 09:24:02       57 阅读
  2. L0、Linux常用命令

    2023-12-07 09:24:02       58 阅读
  3. 【LeeCode】350.两个数组的交集 II

    2023-12-07 09:24:02       55 阅读
  4. ElasticSearch之Index stats API

    2023-12-07 09:24:02       55 阅读
  5. 后端返回数据前端保留两位小数

    2023-12-07 09:24:02       61 阅读
  6. 【算法集训】基础数据结构:二、字符串

    2023-12-07 09:24:02       64 阅读
  7. C语言——二级指针

    2023-12-07 09:24:02       59 阅读
  8. docker:安装nginx并部署一个前端项目

    2023-12-07 09:24:02       52 阅读
  9. LeetCode //C - 383. Ransom Note

    2023-12-07 09:24:02       60 阅读
  10. 时间趋势可视化-柱形图 Python

    2023-12-07 09:24:02       64 阅读
  11. 第十节HarmonyOS 使用资源引用类型

    2023-12-07 09:24:02       59 阅读
  12. 机器学习之萤火虫算法(Firefly Algorithm,FA)

    2023-12-07 09:24:02       55 阅读