如何从 React-Admin 中删除导航栏？答案

【问题标题】：How can I remove the navbar from React-Admin?如何从 React-Admin 中删除导航栏？
【发布时间】：2021-11-16 11:59:11
【问题描述】：

我在尝试从 react-admin 中删除/移除默认导航栏时遇到了一些问题。

如你所见，我原来的 Navbar 在 react-admin navbar 的底部如果我检查并删除它，它将看起来像这样：

帖子、帐户和个人资料图标被下推。只有当我删除了蓝色导航栏的整个类时。你在这里看到的是我真正想要实现的。

这是我目前的代码：dashboard.js

import React, { useState, useEffect } from 'react';
import { requireAuth } from 'util/auth.js';
import users from '../users';
import posts from '../posts';

// Initialize the dataProvider before rendering react-admin resources.
import { Admin, Resource } from 'react-admin';

function DashboardPage(props) {

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

export default requireAuth(DashboardPage);

这是我的 _app.js

import React from "react";
import Navbar from "components/Navbar";
import Footer from "components/Footer";
import { AuthProvider } from "util/auth.js";
import { ThemeProvider } from "util/theme.js";
import { QueryClientProvider } from "util/db.js";

function MyApp({ Component, pageProps }) {
  return (
    <QueryClientProvider>
      <ThemeProvider>
        <AuthProvider>
          <>
            <Navbar
              color="default"
              logo="https://images.squarespace-cdn.com/content/v1/someRandomLogo"
            />

            <Component {...pageProps} />

            <Footer
              bgColor="light"
              size="normal"
              bgImage=""
              bgImageOpacity={1}
              description="Footer admin"
              sticky={true}
            />
          </>
        </AuthProvider>
      </ThemeProvider>
    </QueryClientProvider>
  );
}

export default MyApp;

我一直在尝试添加display:none;，但这不起作用，因为登录和注销会使蓝色导航栏出现，这是我不想要的。感谢您的帮助！

【问题讨论】：

标签： reactjs react-redux material-ui next.js react-admin

【解决方案1】：

Admin 组件具有layout 属性，因此可以覆盖现有布局，包括现有导航。

 <Admin layout={CustomLayout} dataProvider={dataProvider}>
  <Resource name="Post" {...posts} />
  <Resource name="User" {...users} />
</Admin>

import { Layout } from 'react-admin';

const CustomLayout = (props) => <Layout
{...props}
appBar={null}

/>;

例如，如果您不想显示现有导航，则可以将 null 作为名为 appBar 的属性的值传递。另一方面，如果您想创建自定义导航，则只需将自定义导航（组件）分配为 appBar 属性的值。

我希望它的建议会有所帮助。

【讨论】：