使用react-router动态构建路由

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> 
    ) 
} 

这显然是行不通的。我正在努力弄清楚如何不需要为可能加载的每个可能的组件导入声明。此外，应该将API返回到组件的路径还是仅返回组件名称？我看过使用类似handler={require(PathToComponent)}这样的例子，但这个例子还没有证明可行。

这里任何帮助，将不胜感激

Answer 1

ES导入必须是statically analyzable，所以你不能动态地要求它们。相反，你可以使用CommonJS的风格导入动态需要的文件：

var myFile = require('myFile'); 

结合，与route-config approach，和你所有的设置。

你可以看到这样一个例子这个Pluralsight过程的文档模块：Creating Reusable React Components

Answer 2

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

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> 
    ) 
} 

根据路由器如何实现它们的组件功能，此代码可能有点关闭。你总是可以使用require来渲染一个反应组件React.createElement(require('./Component').default)