为什么 MenuItemLink 不在菜单内呈现？

Question

我创建了一个自定义页面，用户可以在其中购买订阅，但我无法导航到该页面，因为该按钮未在菜单内重新显示。我关注了official guide，但只渲染了仪表板和资源按钮。

我在Menu 上做了一个console.log，我看到有3 个孩子： 1 - 仪表板； 2 - 订阅； 3 - 资源按钮数组。

附：我正在使用 React-Admin v3.18.2，如果您需要其他信息，请在下方留言。

谢谢。

menu.tsx

import React from 'react';
import { useSelector } from 'react-redux';
import { DashboardMenuItem, MenuItemLink, getResources, Menu, MenuProps } from 'react-admin';

import { CardMembership, ViewList } from '@material-ui/icons';



const CustomMenu = (props: MenuProps) => {
    const resources = useSelector(getResources);

    return (
        <Menu {...props}>
            <DashboardMenuItem />
            {/* @ts-ignore */}
            <MenuItemLink
                key="subscribe"
                to="/subscribe"
                primaryText="Abbonamenti"
                leftIcon={<CardMembership/>}
                sidebarIsOpen={open}
            />
            {
                resources.map(resource => (
                    /* @ts-ignore */
                    <MenuItemLink
                        key={resource.name}
                        to={`/${resource.name}`}
                        primaryText={(resource.options && resource.options.label) || resource.name}
                        leftIcon={resource.icon ? <resource.icon /> : <ViewList />}
                        sidebarIsOpen={open}
                    />
                ))
            }
        </Menu>
    );
};

export default CustomMenu;

layout.tsx

import React from "react";
import { Layout, LayoutProps } from 'react-admin';

import CustomMenu from './menu';
import CustomAppBar from "./appBar";
import { ProfileProvider } from "../profile";



const CustomLayout = (props: LayoutProps) => (
    <ProfileProvider>
        <Layout {...props} appBar={CustomAppBar} menu={CustomMenu}/>
    </ProfileProvider>
);

export default CustomLayout;

App.tsx

import React from "react";
import dynamic from "next/dynamic";
import { Admin, Resource } from 'react-admin';
import { Work, Group, ViewList } from '@material-ui/icons';

import authProvider from './authProvider';
import dataProvider from './dataProvider';
import Dashboard from './dashboard';
import LoginPage from './login';
import CustomRoutes from './customRoutes';
import CustomLayout from './layouts/layout';
import { JobList, JobEdit, JobCreate } from './jobs';
import { AccountList, AccountEdit, AccountCreate } from './accounts';
import { ServiceList, ServiceEdit, ServiceCreate } from './services';



const App = () => (
    <Admin
        layout={CustomLayout}
        loginPage={LoginPage}
        dashboard={Dashboard}
        authProvider={authProvider}
        dataProvider={dataProvider}
        customRoutes={CustomRoutes}
    >
        {
            permissions => [
                permissions.subStatus === 'active'
                && <Resource
                    name="services"
                    list={ServiceList}
                    edit={ServiceEdit}
                    create={ServiceCreate}
                    icon={ViewList}
                    options={{ label: 'Servizi' }}
                />,

                permissions.subStatus === 'active'
                && <Resource
                    name="accounts"
                    list={AccountList}
                    edit={AccountEdit}
                    create={AccountCreate}
                    icon={Group}
                    options={{ label: 'Account' }}
                />,

                permissions.subStatus === 'active'
                && <Resource
                    name="jobs"
                    list={JobList}
                    edit={JobEdit}
                    create={JobCreate}
                    icon={Work}
                    options={{ label: 'Lavori' }}
                />
            ]
        }
    </Admin>
);

const Run = dynamic(() => Promise.resolve(App), {
    ssr: false,
});

export default Run;

customRoutes.tsx

import React from "react";
import { Route } from 'react-router-dom';

import SubscribePage from './subscription';



const CustomRoutes = [
    <Route key="subscribe" exact path="/subscribe" component={SubscribePage}/>,
];

export default CustomRoutes;

更新： 我解决了将 react-admin 更新到 v3.19.7 的问题。

Answer 1

您需要在 CustomRoutes 中添加到自定义页面的路由：

customRoutes.js:

import React from 'react'
import { Route } from 'react-router-dom'
import Subscribe from 'your_path_to/subscribe'

const CustomRoutes = [
  <Route exact path="/subscribe" render={() => <Subscribe />} />,
]
export default CustomRoutes