React.lazy警告

Question

// project/src/App.js
import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import {NavBar, Loading} from "./components";
import './index.css';

const Home = lazy(() => import('./components/home'));

function App() {
    return (
        <Router>
            <NavBar/>
            <Suspense fallback={<Loading/>}>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    ...
                </Switch>
            </Suspense>
        </Router>
    );
}

export default App;

另一份文件。

// project/src/components/Home.js
import React from "react";

const Home = () => (
    <div className="home">
       ...
    </div>
);

export default Home;

代码可以工作，但() => import('./components/home')生成此警告

参数类型函数()：Promise<{只读默认？：函数()：any}>不能分配给参数类型() => Promise<{默认: ComponentType}>类型Promise<{只读默认？：函数()：any}>不能分配到Promise<{default: ComponentType}>

我已经读过其他的话题了，但都没有用。谢谢。

Answer 1

虽然我不喜欢让事情复杂化，但是要删除这个警告，您必须使用以下语法：

const Home = lazy(() => import('./components/Home').then(({default: Home}) => ({default: Home})));

Answer 2

懒惰不是React的默认导出。试着用花括号包起来，如下所示：

import {lazy} from "react";

下面是如何使用它

如果是打字稿对你大喊大叫，请检查这