1.常规导入组件
常规的导入组件需要在文件开始就将导入的组件写死，如下
import xxx from 'xxx'
现在我需要通过后端返回的数组动态的生成路由，因此在不知道后端返回的情况下，不知道需要导入哪些组件，就需要根据后端返回的组件路径，动态导入组件，
方法一：require
后端返回的数据如下：
[{
path: '/login',
component: 'Login'
}]
可以看见，组件为一个字符串路径。
routes.js如下：
/**
* 根据数组生成路由数组，主要是根据routeArys中组件的路径动态的导入组件
* @param {后端返回的路由数组} routeArys
*/
const createRoutesByRequire = (routeArys) => {
return routeArys.map(routeObj => {
if (routeObj.children) {
return ({
...routeObj,
component: require(`../pages/${
routeObj.component}`).default, // 注意不要在require中全部写变量，需要拼接
children: createRoutesByRequire(routeObj.children)
})
}else {
return ({
...routeObj,
component: require(`../pages/${
routeObj.component}`).default // 注意不要在require中全部写变量，需要拼接
})
}
});
}
/**
* 导出路由数组
*/
export const mainRoutes = createRoutesByRequire([{
path: '/login',
component: 'Login'
}])
index.js如下：
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {
HashRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import {
mainRoutes } from './routes'; //导入routes.js中的mainRoutes
ReactDOM.render(
<Router>
<Switch>
{
mainRoutes.map(route => {
return <Route key={
route.path} {
...route}/>;
})}
</Switch>
</Router>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
方法二：react-loadable
首先需要安装 react-loadable
yarn add react-loadable
新建LoadableUtils.js如下：
import React from 'react';
import Loadable from 'react-loadable';
export default (loader) => {
return Loadable({
loader,
loading() {
return <div>正在加载...</div>
}
});
}
routes.js 如下：
import LoadableUtils from "../utils/LoadableUtils";
const createRoutesByReactLoadable = (routeArys) => {
return routeArys.map(routeObj => {
if (routeObj.children) {
return ({
...routeObj,
component: LoadableUtils(() => import(`../pages/${
routeObj.component}`)), // 此处不要在import中全部传入变量，需要拼接
children: createRoutesByReactLoadable(routeObj.children)
})
}else {
return ({
...routeObj,
component: LoadableUtils(() => import(`../pages/${
routeObj.component}`)) // 此处不要在import中全部传入变量，需要拼接
})
}
});
}
/**
* 导出路由数组
*/
export const mainRoutes = createRoutesByReactLoadable([{
path: '/login',
component: 'Login'
}])
index.js 如下：
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {
HashRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import {
mainRoutes } from './routes'; //导入routes.js中的mainRoutes
ReactDOM.render(
<Router>
<Switch>
{
mainRoutes.map(route => {
return <Route key={
route.path} {
...route}/>;
})}
</Switch>
</Router>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
本文参考：https://blog.csdn.net/noperfecttttt/article/details/81557845