🎉🎉🎉一文全面了解：react-antd-admin 如何修改每个页面的 title🎉🎉🎉一个神奇的 rea

要在React应用程序中为每个页面修改标题，您可以使用react-document-title库。这个库使您能够轻松地在不同的React组件之间动态设置文档标题。

以下是使用react-document-title库的一般步骤：

安装 react-document-title 包：

您可以使用npm或yarn来安装它，例如：

使用npm：
```
npm install react-document-title
```
使用yarn：
```
yarn add react-document-title
```

在您的React组件中导入DocumentTitle组件：

import { DocumentTitle } from 'react-document-title';

在您的React组件中使用DocumentTitle组件来设置文档标题。您可以将其包装在要设置标题的组件周围，并传递标题作为属性：

import React from 'react';
import { DocumentTitle } from 'react-document-title';

function MyPage() {
  return (
    <DocumentTitle title="My Page Title">
      <div>
        {/* 页面内容 */}
      </div>
    </DocumentTitle>
  );
}

export default MyPage;

在这个例子中，每当MyPage组件被渲染时，文档的标题将被设置为"My Page Title"。

您可以在不同的页面组件中使用DocumentTitle来设置不同的标题，以便为每个页面定制标题。

请注意，react-document-title库只会在组件被渲染时设置文档标题，当组件卸载时，它会还原文档的标题。这使得在不同的页面之间轻松切换文档标题成为可能。

这就是使用react-document-title库在React中为每个页面修改标题的基本步骤。

在 react-antd-admin 后台管理系统中，我们是这样封装的

import React from 'react';
import DocumentTitle from 'react-document-title'
import globalConfigs from '@/config/global';

export default function PageWithTitle({ title, children }: { title: string, children: React.ReactNode }) {
    const text = `${title} | ${globalConfigs.title}`
    return (
        <DocumentTitle title={text}>
            {children}
        </DocumentTitle>
    )
}

在每个页面我们都会这样使用

import React from 'react'
import PageWithTitle from '@/components/pageWithTitle'

export default function About() {
  const MainAbout = () => {
    return (
      <div>
        <h1>About</h1>
      </div>
    )
  }
  return (
    <PageWithTitle title='关于我们' children={<MainAbout />} />
  )
}