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

本文介绍了如何在React项目中,通过创建一个jsx组件来动态改变H5页面的标题,以及如何在路由配置中应用这个组件以实现自定义标题功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值