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

Question

我在尝试 delete/remove 来自 react-admin 的默认导航栏时遇到了一些问题。

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

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

到目前为止，这是我的代码：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; 但这不起作用，因为登录和注销会出现蓝色导航栏，这是我不想要的。我会感谢你的帮助！

Answer 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 prop.

的值

希望建议对您有所帮助。

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

How can I remove the navbar from React-Admin?

reactjs

material-ui

react-redux

next.js

react-admin