Why isn't MenuItemLink rendered inside the menu?

Question

i made a custom page where users can buy a subscription, but i can't navigate to that page because the button isn't redered inside menu. I followed the official guide but only render the dashboard and resources buttons.

I've done a console.log on Menu and i saw that there are 3 children: 1 - Dashboard; 2 - Subscribe; 3 - Array of resources buttons.

P.S. I'm using React-Admin v3.18.2 and if you need others info, leave a comment below.

Thanks.

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;

UPDATE: I solved updating react-admin to v3.19.7.

Answer 1

You need to add a route to custom page in 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