配置路由

一、路由配置

1. 创建两个页面

   • src\pages\Home\Home.tsx
   • src\pages\About\About.tsx

   import React from "react";
   
   const Home = () => {
     return (
       <div>
         <p>home页面</p>
       </div>
     );
   };
   
   export default Home;
   

2. 创建路由 src\router\router.tsx

   import React, { lazy, Suspense } from "react";
   import { Navigate } from "react-router-dom";
   
   // 页面 没必要懒加载了, 进来就看到Home
   import Home from "@/pages/Home/Home";
   const About = lazy(() => import("@/pages/About/About"));
   
   const withLoadingComponent = (comp: JSX.Element) => (
     <Suspense fallback={<div>Loading...</div>}>{comp}</Suspense>
   );
   
   // 嵌套路由
   const routes = [
     {
       path: "/",
       element: <Home />,
       children: [],
     },
     {
       path: "/about",
       element: withLoadingComponent(<About />),
     },
   ];
   
   export default routes;
   

3. main.tsx 引入路由

   // etc...
   import { BrowserRouter as Router } from "react-router-dom";
   ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <Router>
       <App />
     </Router>
   );
   // etc...
   

4. App.tsx 使用路由

   import React from "react";
   import { NavLink, useRoutes } from "react-router-dom";
   import router from "@/router/router";
   
   const App = () => {
     const RouterOutlet = useRoutes(router);
   
     return (
       <div className="App">
         <NavLink to="/about">去about</NavLink>
         {RouterOutlet}
       </div>
     );
   };
   
   export default App;