React-Admin 如何更改菜单中的“仪表板”名称

Question

如何更改 react-admin 中的“仪表板”菜单名称？

默认情况下，即使在Demo 中，它的名称也始终是“仪表板”

名称是仪表板。有人知道更改名称的方法，或者是否可以更改？

Answer 1

在Menu.tsx，不要这样称呼它

<DashboardMenuItem onClick={onMenuClick} sidebarIsOpen={open} />

而是将其称为普通菜单项，但指向仪表板组件

<MenuItemLink
        to={`/`} // by default react-admin renders Dashboard on this route
        primaryText="Your Text"
        leftIcon={<YourIcon />}
        onClick={onMenuClick}
        sidebarIsOpen={open}
        dense={dense}
      />

Answer 2

就像在that answer 中显示的那样，在 MenuItemLink 中有一个名为 primaryText="Your Text" 的属性，您可以在自己的情况下使用它

<DashboardMenuItem onClick={onMenuClick} classes={classes} primaryText="Your Text" />

将默认“仪表板”名称更改为您想要的名称。

Answer 3

所以更详细的答案是：

1. 覆盖布局

// in src/Admin.js
  <Admin
        layout={MyLayout}
        title="SuperCoolProject"
        theme={myTheme}
        dataProvider={dataProvider}
        authProvider={authProvider}
      >

1. 在布局中使用自定义菜单。 （不是侧边栏）

// in src/MyLayout.js
import React from "react";
import { Layout } from "react-admin";
import MyMenu from "./MyMenu";

const MyLayout = (props) => <Layout {...props} menu={MyMenu} />;

export default MyLayout;

1. 更改菜单，使其仍然呈现资源并添加您需要的自定义 MenuItemLinks（相对于硬编码的“仪表板”）

// in src/Menu.js
import React from "react";
import { useSelector } from "react-redux";
import { useMediaQuery } from "@material-ui/core";
import { MenuItemLink, getResources } from "react-admin";
import DefaultIcon from "@material-ui/icons/ViewList";
import SettingsIcon from "@material-ui/icons/Settings";
import HomeIcon from "@material-ui/icons/Home";
import HelpIcon from "@material-ui/icons/Help";

const Menu = ({ onMenuClick, logout }) => {
  const isXSmall = useMediaQuery((theme) => theme.breakpoints.down("xs"));
  const open = useSelector((state) => state.admin.ui.sidebarOpen);
  const resources = useSelector(getResources);
  return (
    <div>
      <MenuItemLink
        to="/home"
        primaryText="Home"
        leftIcon={<HomeIcon />}
        onClick={onMenuClick}
        sidebarIsOpen={open}
      />
      {resources.map((resource) => (
        <MenuItemLink
          key={resource.name}
          to={`/${resource.name}`}
          primaryText={
            (resource.options && resource.options.label) || resource.name
          }
          leftIcon={resource.icon ? <resource.icon /> : <DefaultIcon />}
          onClick={onMenuClick}
          sidebarIsOpen={open}
        />
      ))}
      <MenuItemLink
        to="/custom-route"
        primaryText="Settings"
        leftIcon={<SettingsIcon />}
        onClick={onMenuClick}
        sidebarIsOpen={open}
      />
      <MenuItemLink
        to="/help-center"
        primaryText="Help Center"
        leftIcon={<HelpIcon />}
        onClick={onMenuClick}
        sidebarIsOpen={open}
      />
      {isXSmall && logout}
    </div>
  );
};

export default Menu;