配置路由

一、路由配置

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;

1. 创建路由 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;

1. main.tsx 引入路由

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

1. 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;