import "./App.css";
import { NavLink, Route, Routes } from "react-router-dom";
// 懒加载 lazy ; 配合懒加载使用的组件 Suspense
import { lazy, Suspense } from "react";
import Home from "./pages/Home";
// import About from "./pages/About";
// import List from "./pages/List";

import ListName from "./pages/ListName";
import ListPhone from "./pages/ListPhone";
// 懒加载引入
const List = lazy(() => import("./pages/List"));
const About = lazy(async()=>{
  await new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve()
    },1000)
  })
  return import('./pages/About')
 })


// 懒加载的高阶组件
function LazyLoading(Component) {
  return(
    <Suspense fallback={<h4>正在加载中....</h4>}>
      <Component/>
    </Suspense>
  )
}


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <NavLink className="App-link" to={"/"}>
          首页
        </NavLink>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <NavLink className="App-link" to={"/about"}>
          关于
        </NavLink>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <NavLink className="App-link" to={"/list"}>
          列表
        </NavLink>
      </header>
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={LazyLoading(About)} />
          {/* <Route path="/about" Component={About} /> */}
          <Route path="/list" element={LazyLoading(List)}>
            <Route index="true" element={<ListPhone />}></Route>
            <Route path="name" element={<ListName />} />
            {/* <Route path="phone" element={<ListPhone />} /> */}
          </Route>
        </Routes>
      </main>
    </div>
  );
}

export default App;