How can I create a custom page with #react-admin without the menu sidebar like login page?

Question

I am using react-admin previously admin-on-rest. I want to create a custom page that doesn't show the Menu sidebar, like Login page. I will use this page reset user's password. How can I do that?

Answer 1

This is not obvious in the documentation but the Route actually accepts a noLayout prop:

<Admin
    customRoutes={[
        <Route
            path="/custom"
            component={CustomRouteNoLayout}
            noLayout
        />,
        <Route
            path="/custom2"
            component={CustomRouteWithLayout}
        />,
    ]}
>

Answer 2

Add a custom route with the component you want to render. When route is successful the specified component will be presented. No Menu will be shown just whatever you have in the component you send as prop to Route.

The way you put the question it seemed like you were trying to have a custom page that hadn't a MenuItemLink in Menu. Had to reread the question to understand what you wanted.

Answer 3

I'd like to add on to Gildas Garcia's answer. After you added the customed routes as shown in the documentation, you need to add a hash # in front of the route url to be able to view the content. For example, if you are displaying the view at localhost:3000/, and one of your routes is

<Route exact path="/foo" component={Foo} />,

then you should go to localhost:3000/#/foo to view the content.

Answer 4

As per current documentation (v4.12.1) you can use the noLayout property available in the CustomRoutes component:

const App = () => (
    <Admin dataProvider={dataProvider}>
        <CustomRoutes noLayout>
            <Route path="/register" element={<Register />} />
        </CustomRoutes>
        <CustomRoutes>
            <Route path="/settings" element={<Settings />} />
            <Route path="/profile" element={<Profile />} />
        </CustomRoutes>
    </Admin>
);