react根据后台返回的组件路径动态的引入组件（react动态加载组件）

　　搭建react项目时，刚开始路由的配置文件都是写死的，每写一个组件而后都须要本身去路由的配置文件中进行配置路由。其实刚开始以为也很正常，由于动态import感受很难实现。可是项目需求后台须要记录那些组件的路径以及路由 跳转的路径。因此就想到了哪些数据都由后台返回，前端只须要根据后台返回的路径动态的引入组件。

　　一开始后台返回的是完整路径，好比说本身写的组件在pages目录下，而后在routers目录中的Index.jsx中引入组件，即‘../pages/header/Header.jsx’，而后后台就给返回‘../pages/header/Header.jsx’这个路径，如图：

　　其实是不行的，代码以下：

<Switch>
 {this.state.RouterData && this.state.RouterData.map((item, index) => { 　　return <Route key={index} path={item.path} component={asyncComponent(() => import(item.component))}></Route> 　　})}
 {/* 重定向 */} <Route path='/' exact render={() => ( 　　<Redirect to="/header" /> )} />

 {/* 错误路径跳转的组件 */} <Route component={ErrorView} />

</Switch>

　　这样引入的话会报找不到这个组件，而后就一直想是什么问题，这样写感受也没什么问题，可是确实是报错找不到这个组件，解决方法就是后台不能返回这个完整路径，只能返回这个组件在哪一个位置：好比在pages下的header文件夹中的Header.jsx，就只能返回‘pages/header/Header.jsx’,这样的话咱们在引入组件时作一个字符串拼接就能够找到这个组件了，代码以下：

　　

<Switch>
 　　{this.state.RouterData && this.state.RouterData.map((item, index) => { 　　　　return <Route key={index} path={item.path} component={asyncComponent(() => import('../' +item.component))}></Route>

　　})}

 　　{/* 重定向 */} 　　<Route path='/' exact render={() => ( 　　　　<Redirect to="/header" /> 　　)} />

 　　{/* 错误路径跳转的组件 */} 　　<Route component={ErrorView} /> </Switch>

　　注意，this.state.RouterData是后台返回来的数据而后保存在state中的，asyncComponent是异步加载组件的一个方法，代码以下：

import React from 'react'; // 这个asyncComponent函数接受一个importComponent的参数，importComponent调用时候将动态引入给定的组件。 // 在componentDidMount咱们只是简单地调用importComponent函数，并将动态加载的组件保存在状态中。 // 最后，若是完成渲染，咱们有条件地提供组件。若是不写null的话，也可提供一个loading，表明着组件正在渲染。
 export default function asyncComponent(importComponent) { class AsyncComponent extends React.Component { constructor() { super(); this.state = { component: null } } async componentDidMount() { const { default: component } = await importComponent(); this.setState({component: component}) } render() { const C = this.state.component; return C ? <C {...this.props} /> : null; } } return AsyncComponent; }

　　这样就完成了异步加载组件啦，有什么还不明白的能够加我QQ: 1274668609