React-Admin 如何更改菜单中的 "Dashboard" 名称

Question

如何在 react-admin 中更改 "dashoboard" 菜单名称？

默认情况下，它的名称始终是 "Dashboard"，即使在 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

如所示，在 MenuItemLink 中有一个名为 primaryText="Your Text" 的属性你可以自己使用

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

将默认 "Dashboard" 名称更改为您想要的名称。

Answer 3

所以更详细的答案是：

覆盖布局

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

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

// 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;

更改菜单，使其仍然呈现资源并添加您需要的自定义 MenuItemLink（对比一个硬编码 "dashboard"）

// 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;

React-Admin 如何更改菜单中的 "Dashboard" 名称

React-Admin How to change the "Dashboard" name in the menu

dashboard

react-admin