如何设置不同的网页标题（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: "我的测评" }} />
},