Блог

У меня возникли некоторые проблемы при попытке удалить/удалить навигационную панель по умолчанию из react-admin.

Как вы можете видеть, моя оригинальная навигационная панель находится в нижней части навигационной панели react-admin, которая, если я проверю и удалю ее, будет выглядеть примерно так:

Сообщение, учетная запись и значок профиля будут сдвинуты вниз. Это было только тогда, когда я удалил весь класс синей навигационной панели. То, что вы видите здесь, — это то, чего я на самом деле хочу достичь.

До сих пор это мой код: 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; , но это не работает, потому что при входе и выходе появляется синяя навигационная панель, чего я не хочу. Я буду признателен вам за помощь!

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.

Я надеюсь, что это предложение может быть полезным.