如何移除React-Admin自带的默认顶部导航栏？

解决react-admin移除默认导航栏方案 #

你可以通过react-admin官方提供的组件覆盖能力实现需求，无需手动写CSS强制隐藏，避免登录登出后组件重新渲染导致样式失效的问题：

步骤1：修改dashboard.js代码 #

导入Layout组件，用空组件替换默认导航栏：

import React, { useState, useEffect } from 'react';
import { requireAuth } from 'util/auth.js';
import users from '../users';
import posts from '../posts';
// 新增导入Layout组件
import { Admin, Resource, Layout } from 'react-admin';

// 声明空AppBar组件，直接返回null即可隐藏默认导航
const EmptyAppBar = () => null;

// 自定义布局，替换默认的顶部导航栏
const CustomLayout = (props) => <Layout {...props} appBar={EmptyAppBar} />;

function DashboardPage(props) {
  return (
    <Admin dataProvider={dataProvider} layout={CustomLayout}>
      <Resource name="Post" {...posts} />
      <Resource name="User" {...users} />
    </Admin>
  );
}

export default requireAuth(DashboardPage);

可选：修复残留顶部间距 #

如果移除导航后内容区域还有默认预留的顶部间距，可以添加全局CSS重置：

.RaLayout-content {
  padding-top: 0 !important;
}

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