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