在登录之前和之后使用捆绑包拆分 react-admin 应用程序的代码

Question

考虑如下所示的 react-admin 应用程序。我打算代码分离的方式，在一切都'./posts'和'./users'在用户登录之后才加载。

我计划使用我可以使用的动态 import() 语法，以便webpack 自动开始对应用程序进行代码拆分。

我看到的问题是所有应用程序组件都是使用应用程序的定义导入的。在东西的动态导入'./posts'，并'./users'因为它是在应用程序本身的进口也不会分裂。

如何设置和拆分此代码库，以便只有在用户登录后才加载'./posts'和'./users'加载内容？

import React, { Component } from 'react';
import { Admin, Resource } from 'react-admin';
import { Login } from 'ra-ui-materialui';
import { authProvider, dataProvider, i18nProvider } from './providers';
// vvv - to be loaded after the user has logged in 
import { PostList, PostEdit, PostCreate, PostIcon } from './posts';
import { UserList, UserEdit, UserCreate, UserIcon } from './users';
// ???

class App extends Component {
    render() {
        return (
            <Admin
                title="MyApp"
                loginPage={Login}
                dataProvider={dataProvider}
                authProvider={authProvider}
                i18nProvider={i18nProvider}
            >
                <Resource
                    name="posts"
                    list={PostList}
                    edit={PostEdit}
                    create={PostCreate}
                    icon={PostIcon}
                />
                <Resource
                    name="users"
                    list={UserList}
                    edit={UserEdit}
                    create={UserCreate}
                    icon={UserIcon}
                />
            </Admin>
        );
    }
}
export default App;

Answer 1

据我了解，您只想在登录后显示帖子和用户，因此您可以做的就是使用状态变量将其他组件包装到条件中的组件，并将一个函数传递给您的Admin组件并在登录成功时调用它，如下所示：

\n\n

import React, { Component } from \'react\';\nimport { Admin, Resource } from \'react-admin\';\nimport { Login } from \'ra-ui-materialui\';\nimport { authProvider, dataProvider, i18nProvider } from \'./providers\';\n// vvv - to be loaded after the user has logged in \nimport { PostList, PostEdit, PostCreate, PostIcon } from \'./posts\';\nimport { UserList, UserEdit, UserCreate, UserIcon } from \'./users\';\n// \xe2\x88\xa7\xe2\x88\xa7\xe2\x88\xa7\n\nclass App extends Component {\n   state:{\n     loggedIn: false,\n          }\n    onLoginSuccess(){\n     this.setState({loggedIn: true});\n     }\n    render() {\n        return (\n            <Admin\n                title="MyApp"\n                loginPage={Login}\n                onLoginSuccess={this.onLoginSuccess.bind(this)}\n                dataProvider={dataProvider}\n                authProvider={authProvider}\n                i18nProvider={i18nProvider}\n            >\n               {(this.state.loggedIn) && \n                  <Resource\n                    name="posts"\n                    list={PostList}\n                    edit={PostEdit}\n                    create={PostCreate}\n                    icon={PostIcon}\n                />\n                <Resource\n                    name="users"\n                    list={UserList}\n                    edit={UserEdit}\n                    create={UserCreate}\n                    icon={UserIcon}\n                />\n             }\n            </Admin>\n        );\n    }\n}\nexport default App;\n

\n\n

或者更好的方法可能是创建一个单独的路由文件并处理\n所有这些逻辑

\n