在admin-on-rest中如何修改Chrome标签页默认的React App标题？

当然有办法解决这个问题！默认情况下，Chrome标签页显示的是你项目public/index.html文件里<title>标签的内容（也就是"React App"），而admin-on-rest的Admin组件设置的标题通常只用来显示在页面内部的导航栏区域。要修改标签页标题，你可以试试下面几种方法：

方法1：直接修改静态标题（简单固定场景） #

直接找到项目根目录下的public/index.html文件，定位到<title>React App</title>这一行，把"React App"替换成你想要的固定标题，比如<title>我的后台管理系统</title>。这种方法适合不需要根据页面切换动态改变标题的场景。

方法2：用react-helmet动态控制标题（推荐，支持页面切换自动更新） #

admin-on-rest可以结合react-helmet来管理页面头部信息，包括标签页标题，步骤如下：

1. 先安装依赖：

npm install react-helmet --save
# 或者用yarn
yarn add react-helmet

2. 自定义Layout组件，在里面通过Helmet设置标题：

import React from 'react';
import { Layout } from 'admin-on-rest';
import { Helmet } from 'react-helmet';

const CustomLayout = props => {
    const { title } = props; // 这里的title是Admin组件传入的页面级标题
    return (
        <div>
            <Helmet>
                <title>{title} | 我的后台</title>
            </Helmet>
            <Layout {...props} />
        </div>
    );
};

export default CustomLayout;

3. 在Admin组件中使用这个自定义Layout：

import { Admin } from 'admin-on-rest';
import CustomLayout from './CustomLayout';

const App = () => (
    <Admin layout={CustomLayout} title="我的后台管理系统" dataProvider={/* 你的数据提供者 */}>
        {/* 你的资源配置 */}
    </Admin>
);

export default App;

这样设置后，当你切换不同页面（比如从用户列表到订单列表），标签页标题会自动跟着页面内的标题变化，还能带上你自定义的后缀。

方法3：在特定页面单独设置标题 #

如果你想给某个特定页面（比如某资源的列表页或详情页）单独设置标题，可以在组件里调用props传入的setTitle函数：

import { List } from 'admin-on-rest';

const UserList = props => {
    props.setTitle('用户管理'); // 这会同步更新页面内标题和标签页标题（前提是你用了方法2的配置）
    return (
        <List {...props}>
            {/* 你的列表字段配置 */}
        </List>
    );
};

需要注意的是：如果没配置react-helmet，admin-on-rest默认不会修改标签页标题，所以才会一直显示index.html里的"React App"，方法2的方案可以完美解决动态标题的需求。

内容的提问来源于stack exchange，提问作者blueheart_2