React1.8踩坑-lazy懒加载报错

看视频学react时候说到lazy扩展，原代码：

...
import Loading from './Loading'
const About = lazy(() => {import('./About')})

export default class LazyDemo extends Component {
   render(){
        return (
            ...
            <Suspense fallback={Loading}> 
                <Route path="/about" component={About}>
            </Suspense>
        )
    }  
}

报错，要求用Routes包裹，于是添加新的,报错，没有了component

...
import Loading from './Loaing'
const About = lazy(() => {import('./About')})

export default class LazyDemo extends Component {
   render(){
        return (
            ...
            <Suspense fallback={<Loading />}> 
                <Routes>
                <Route path="/about" element={<About />}>
                </ Routes>
            </Suspense>
        )
    }  
}

报错：Uncaught TypeError: Cannot read properties of undefined (reading 'then')

看文档找不到问题，后来输出了About才发现多了大括号才能输出，也就是lazy引入的时候多了{}包裹，{import('./About')} 去掉就能用了

...
import Loading from './Loaing'
const About = lazy(() => import('./About'))

export default class LazyDemo extends Component {
   render(){
        return (
            ...
            <Suspense fallback={<Loading />}> 
                <Routes>
                <Route path="/about" element={<About />}>
                </ Routes>
            </Suspense>
        )
    }  
}