如何使用#react-admin 创建一个自定义页面，而没有像登录页面这样的菜单侧边栏？

Posted 2023-02-22

【中文标题】如何使用#react-admin 创建一个自定义页面，而没有像登录页面这样的菜单侧边栏？

【英文标题】：How can I create a custom page with #react-admin without the menu sidebar like login page?

【发布时间】：2018-12-18 11:04:10

【问题描述】：

我之前使用的是 react-admin admin-on-rest。我想创建一个不显示菜单侧边栏的自定义页面，例如登录页面。我将使用此页面重置用户密码。我怎样才能做到这一点？

【问题讨论】：

marmelab.com/react-admin/Admin.html#applayout

我不想改变我所有的 Layout 。我只想创建一个不在 react-admin 布局中的页面

您可以使用自定义菜单实现此目的。

感谢您的回答。我已经有一个自定义菜单。我只想有一个类似登录页面的页面来重置用户密码。

【参考方案1】：

这在documentation 中并不明显，但Route 实际上接受noLayout 属性：

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

【参考方案2】：

为您要渲染的组件添加custom route。当路由成功时，将显示指定的组件。没有Menu 将显示您作为道具发送给Route 的组件中的任何内容。

您提出问题的方式似乎是您试图在Menu 中拥有一个没有MenuItemLink 的自定义页面。必须重新阅读问题才能了解您想要什么。

【参考方案3】：

我想补充一下 Gildas Garcia 的回答。如文档所示添加自定义路由后，您需要在路由 url 前面添加一个哈希 # 才能查看内容。 例如，如果您在 localhost:3000/ 显示视图，并且您的路线之一是

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

那你应该去localhost:3000/#/foo查看内容。

【讨论】：

如果有人知道如何去除网址中的哈希#，请告诉我！

这取决于您使用的路由器历史记录。您可以将自己的传递给 react-admin