搭建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='http://www.likecs.com/' exact render={() => (
<Redirect to="/header" />
)} />
{/* 错误路径跳转的组件 */}
<Route component={ErrorView} />
</Switch>