在react-admin中自定义更改每个页面的标题可以通过以下步骤实现:
// CustomLayout.js
import React from 'react';
import { Layout } from 'react-admin';
const CustomLayout = (props) => {
const { title } = props;
return (
<Layout {...props}>
<h1>{title}</h1>
{props.children}
</Layout>
);
};
export default CustomLayout;
Admin
组件,并传递页面标题作为属性。// App.js
import React from 'react';
import { Admin, Resource } from 'react-admin';
import CustomLayout from './CustomLayout';
import { PostList, PostEdit, PostCreate } from './posts';
const App = () => (
<Admin layout={CustomLayout}>
<Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} />
</Admin>
);
export default App;
useEffect
钩子函数更新页面标题。// PostList.js
import React, { useEffect } from 'react';
import { List, Datagrid, TextField } from 'react-admin';
const PostList = (props) => {
useEffect(() => {
document.title = '自定义页面标题 - 文章列表';
}, []);
return (
<List {...props}>
<Datagrid>
<TextField source="title" />
</Datagrid>
</List>
);
};
export default PostList;
通过以上步骤,你可以在react-admin中自定义每个页面的标题。在自定义布局组件中,你可以使用任何你喜欢的方式来展示页面标题,例如使用<h1>
标签、样式化组件等。在每个页面组件中,你可以根据需要更新页面标题,以便更好地反映当前页面的内容。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云