如何使用React动态导入目标文件？

Question

我已经设置了RouteConfig.js文件

import React from 'react'
import { Route } from 'react-router-dom'
import Dashboard from './components/dashboard/Dashboard.js'
import ProjectDetails from './components/project/ProjectDetails.js'
const RouteList = [
  { component: Dashboard, path: '/', exact: true },
  { component: ProjectDetails, path: '/details', exact: true }
]

const Routes = RouteList.map(route => {
  return (
    <Route
      path={route.path}
      component={route.component}
      key={route.component}
      exact={route.exact}
    ></Route>
  )
})

export default Routes

，它非常适合我自己。但是我的代码将会增长，并且我将导入大量的组件行。因此，我尝试使用VueRouter之类的ReactRouter进行动态导入，但没有成功。

import React from 'react'
import { Route } from 'react-router-dom'
const RouteList = [
  {
    component: () => import('./components/dashboard/Dashboard.js'),
    path: '/',
    exact: true
  },
  {
    component: () => import('./components/project/ProjectDetails.js'),
    path: '/details',
    exact: true
  }
]

const Routes = RouteList.map(route => {
  return (
    <Route
      path={route.path}
      component={route.component}
      key={route.component}
      exact={route.exact}
    ></Route>
  )
})

export default Routes

我想知道是否有一种方法可以在目标文件中进行一些动态导入。谢谢大家。