Question

我们正在使用带有React的dotnet core 2.2。我们在应用程序中有两个独立的模块（用户和管理员），应分别加载。我们如何在服务器上提供路由以加载管理员或用户模块？

我们有一个适用于Angular的https://github.com/nickwesselman/SpaServicesMultiSpa示例，我们如何对其进行修改以使其在React中起作用？

Answer 1

对User和Admin模块使用不同的根元素（例如App.js和AppAdmin.js）。然后在index.js中，根据URL选择要呈现的内容：

import App from './App';
import AppAdmin from './AppAdmin';

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

if (window.location.pathname.indexOf(baseUrl + 'admin') === 0) {
    ReactDOM.render(<AppAdmin />, rootElement);
}
else {
    ReactDOM.render(<App />, rootElement);
}

当URL以路径/admin（例如/admin以及/admin/funds，/admin/settings等开头时，这会将AppAdmin呈现为根组件）

如果您希望将管理员和用户JavaScript / CSS分成单独的文件（这样普通用户就不会下载管理员JavaScript代码，反之亦然），则可以使用动态导入来触发code splitting ：

// Ensure there is no "import App" or "import AppAdmin" statements
// in the import statements section at the top of the file.

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

if (window.location.pathname.indexOf(baseUrl + 'admin') === 0) {
    import('./AppAdmin').then(({ default: AppAdmin }) => {
        ReactDOM.render(<AppAdmin />, rootElement);
    });
}
else {
    import('./App').then(({ default: App }) => {
        ReactDOM.render(<App />, rootElement);
    });
}

我们如何配置dotnet core react应用程序使用多用途？

1 个答案: