Question

我正在构建一个应用程序，它将在引导React之前调用API。此API将告诉我需要根据用户的订阅加载哪些功能。

API将返回一个对象数组，其格式如下所示

links: [
    {
        label: 'Payment Reconciliation',
        component: './components/_paymentReconciliation/paymentReconciliationPage',
        url: '/paymentreconciliation'
    },
    {
        label: 'Device Integration',
        component: './components/_deviceIntegration/deviceIntegrationPage',
        url: '/deviceintegration'
    }
]

映射链接以生成动态Routes

非常容易

export default function Routes() {
    let featureRoutes = config.FEATURES.links.map((menuItem, i) => {
        return (
            <Route path={menuItem.url} component={require(menuItem.component).default} key={i} />
        )
    });
    return (<div>
        <Route exact path="/" component={LandingPage} />
        {featureRoutes}
    </div>
    )
}

这显然不起作用。我正在努力弄清楚如何不为每个可能加载的组件使用import语句。 API也应该返回组件的路径或仅返回组件名称吗？我见过使用类似handler={require(PathToComponent)}之类的例子，但事实证明这两个例子都没有用。

任何帮助都将不胜感激

Answer 1

尝试要求组件路径获取对该组件的引用。

export default function Routes() {
    let featureRoutes = config.FEATURES.links.map((menuItem, i) => {
        return (
            <Route path={menuItem.url} component={require(menuItem.component).default} key={i} />
        )
    });
    return (<div>
        <Route exact path="/" component={LandingPage} />
        {featureRoutes}
    </div>
    )
}

根据react-router实现其组件功能的方式，这段代码可能有点偏差。您始终可以使用带有React.createElement(require('./Component').default)

的require渲染反应组件

Answer 2

ES导入必须为statically analyzable，因此您无法动态要求它们。相反，您可以使用CommonJS样式导入来动态需要文件：

var myFile = require('myFile');

将其与route-config approach相结合，您就完全了。

您可以在此Pluralsight课程的文档模块中看到此示例：Creating Reusable React Components

使用react-router动态构建路由

2 个答案: