自定义用户菜单中的注销按钮不执行任何操作

Question

我有自定义用户菜单

import React from "react";
import { UserMenu, MenuItemLink} from "react-admin";
import SettingsIcon from "@material-ui/icons/Settings";
import jwt from "jwt-decode";

const AdminUserMenu = ({ logout }) => {
    var user = jwt(localStorage.getItem("token"));
    return (
        <UserMenu>
            <MenuItemLink
                to={"/Admins/" + user.id}
                primaryText="Profile"
                leftIcon={<SettingsIcon />}
            />
            {logout}
        </UserMenu>
    );
};

export default AdminUserMenu;


const AdminAppBar = (props) => (
    <AppBar {...props} userMenu={<AdminUserMenu />} />
);

配置文件 link 有效。但是注销按钮什么都不做。我怎样才能让它工作以便用户可以注销？

Answer 1

试试这个：

const AdminUserMenu = (props) => {
    var user = jwt(localStorage.getItem("token"));
    return (
        <UserMenu {...props} >
            <MenuItemLink
                to={"/Admins/" + user.id}
                primaryText="Profile"
                leftIcon={<SettingsIcon />}
            />
        </UserMenu>
    );
};

Answer 2

我的行为与您使用最新版本时的行为相同。出于某种原因，MaxAlex 的上述代码也无法正常工作。

我能够按如下方式让它工作。请注意 {logout} 在 ConfigurationMenu 对象中与在 CustomUserMenu.

中的位置

import * as React from 'react';
import { forwardRef } from 'react';
import { AppBar, UserMenu, MenuItemLink, useTranslate } from 'react-admin';
import Typography from '@material-ui/core/Typography';
import SettingsIcon from '@material-ui/icons/Settings';
import { makeStyles } from '@material-ui/core/styles';

import Logo from '../Logo';

const useStyles = makeStyles({
    title: {
        flex: 1,
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
    },
    spacer: {
        flex: 1,
    }
});

const ConfigurationMenu = ({logout, props}) => {
    const translate = useTranslate();
    return (
        <div>
            <MenuItemLink
                to="/profile"
                primaryText={translate("cw.profile.title")}
                leftIcon={<SettingsIcon />}
                {...props}
            />
            {logout}
        </div>
    );  
};

const CustomUserMenu = (props) => (
    <UserMenu {...props} >
        <ConfigurationMenu />
    </UserMenu>
);

const CustomAppBar = (props) => {
    const classes = useStyles();
    return (
        <AppBar {...props} elevation={1} userMenu={<CustomUserMenu />}>
            <Typography
                variant="h6"
                color="inherit"
                className={classes.title}
                id="react-admin-title"
            />
            <Logo />
            <span className={classes.spacer} />
        </AppBar>
    );
};

export default CustomAppBar;

自定义用户菜单中的注销按钮不执行任何操作

Logout button in custom usermenu does nothing

reactjs

react-admin