添加route

package.json

@@ -13,7 +13,8 @@
     "nanoid": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-photo-view": "^1.2.3"
+    "react-photo-view": "^1.2.3",
+    "react-router-dom": "^6.6.1"
   },
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",

src/App.tsx

@@ -1,14 +1,18 @@
 import Masonry from "@components/masonry";
-
+import { Link, Outlet } from "react-router-dom";
 import Image from "@components/image";
 export default function App() {
   // return <Masonry />;
   const url = `https://images.pexels.com/photos/5702958/pexels-photo-5702958.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1`;
 
   return (
     <div>
-      <Masonry />
+      {/* <Masonry /> */}
       {/* <Image url={url} /> */}
+      <Link to='/photo'>测试第一个跳转</Link>
+      <Link to='/video'>test to video</Link>
+      <Link to='/read'>test to read</Link>
+      <Outlet />
     </div>
   );
 }

src/components/image/index.tsx

@@ -7,36 +7,36 @@ type ImageProps = {
 };
 
 function useLoading(url: string) {
-  const [obj, setObj] = useState<ImageSize & { loading: boolean }>({
+  const [obj, setObj] = useState<ImageSize & { isLoaded: boolean }>({
     width: 0,
     height: 0,
     again: false,
-    loading: true,
+    isLoaded: false,
+    success: true,
   });
-  useMemo(() => {
-    getImageSize(url).then(({ width, height, again }) => {
-      setObj(() => ({
-        width: width,
-        height: height,
-        again: again,
-        loading: false,
-      }));
-    });
+  useMemo(async () => {
+    const res = await getImageSize(url);
+    if (res.success === false) {
+      setObj(() => ({ success: false, isLoaded: true }));
+    } else {
+      setObj(() => ({ ...res, isLoaded: true }));
+    }
   }, [url]);
-  return { loading: obj.loading, size: obj };
+  return obj;
 }
 
 export default function Image({ url }: ImageProps) {
-  const { loading, size } = useLoading(url);
-  console.log({ loading, size });
+  const res = useLoading(url),
+    { isLoaded, success } = res;
+  // console.log(res);
   return (
     <div>
       <img
         width={180}
-        height={getResizeHeight(size, 180)}
-        src={loading ? fallbackUrl : url}
+        height={getResizeHeight(res, 180)}
+        src={isLoaded && success ? url : fallbackUrl}
         style={{
-          opacity: loading ? 0.09 : 1.0,
+          opacity: isLoaded ? 1.0 : 0.09,
         }}
         alt=''
       />

src/components/image/tool.ts

@@ -1,9 +1,14 @@
 import { Once } from "@utils/index";
-export type ImageSize = {
-  width: number;
-  height: number;
-  again: boolean;
-};
+export type ImageSize =
+  | {
+      width: number;
+      height: number;
+      again: boolean;
+      success: true;
+    }
+  | {
+      success: false;
+    };
 /**
  * image组件的工具库
  */
@@ -16,25 +21,36 @@ export function getImageSize(imageSrc: string): Promise<ImageSize> {
         width: image.width,
         height: image.height,
         again: true,
+        success: true,
       });
     }
     image.onload = () =>
       resolve({
         width: image.width,
         height: image.height,
         again: false,
+        success: true,
+      });
+    image.onerror = () => {
+      resolve({
+        success: false,
       });
+    };
   });
 }
 
 export function getResizeHeight(imageSizeObj: ImageSize, realwidth: number) {
-  const res = 100 + Math.ceil(Math.random() * 100);
-  if (imageSizeObj.width < 1 || imageSizeObj.height < 1) {
+  const res = Math.ceil((100 + Math.ceil(Math.random() * 100)) / 5) * 5;
+  if (
+    imageSizeObj.success !== true ||
+    imageSizeObj.width < 1 ||
+    imageSizeObj.height < 1
+  ) {
     return res;
   }
   const realheight =
     imageSizeObj.height / Math.floor(imageSizeObj.width / realwidth);
-  return isNaN(realheight) ? res : realheight;
+  return isNaN(realheight) ? res : Math.ceil(realheight / 5) * 5;
 }
 
 export const fallbackUrl =

src/components/masonry/index.tsx

@@ -28,7 +28,7 @@ export default function App() {
       return !!items[index];
     },
     minimumBatchSize: 12,
-    // totalItems: 30,
+    // totalItems: 10,
   });
   return (
     <div

src/main.tsx

@@ -1,10 +1,59 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
 import App from "./App";
+import VideoPage from "./routers/video";
 import "./index.less";
+import ReadPage from "./routers/read";
+import Layout from "./routers/layout";
+import PhotoPage from "./routers/photo";
+import ErrorPage from "./routers/error";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout />,
+    // loader:
+    // action:
+    // error组件
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        // error组件
+        errorElement: <ErrorPage />,
+        children: [
+          {
+            //默认页面
+            index: true,
+            element: <PhotoPage />,
+          },
+          {
+            path: "video",
+            element: <VideoPage />,
+          },
+          {
+            path: "read",
+            element: <ReadPage />,
+          },
+          {
+            path: "photo",
+            element: <PhotoPage />,
+          },
+        ],
+      },
+    ],
+  },
+]);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   // <React.StrictMode>
-  <App />
+  <RouterProvider router={router} />
+
   // </React.StrictMode>
 );

src/routers/error.tsx

@@ -0,0 +1,3 @@
+export default function ErrorPage() {
+  return <h1>这里是error页</h1>;
+}

src/routers/index.tsx

@@ -0,0 +1,3 @@
+export default function Index() {
+  return <h1>这里是首页</h1>;
+}

src/routers/layout.tsx

@@ -0,0 +1,54 @@
+import {
+  Outlet,
+  NavLink,
+  useLoaderData,
+  Form,
+  redirect,
+  useNavigation,
+  useSubmit,
+} from "react-router-dom";
+export default function Layout() {
+  const nav_lists = [
+    {
+      id: 1,
+      pathname: "photo",
+    },
+    {
+      id: 2,
+      pathname: "read",
+    },
+    {
+      id: 3,
+      pathname: "video",
+    },
+  ];
+  return (
+    <>
+      <header>首部</header>
+      <main>
+        <nav>
+          <ul>
+            {nav_lists.map((nav) => (
+              <li key={nav.id}>
+                <NavLink
+                  to={nav.pathname}
+                  className={({ isActive, isPending }) =>
+                    isActive ? "active" : isPending ? "pending" : ""
+                  }
+                >
+                  {nav.pathname}
+                </NavLink>
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <section
+        // className=
+        >
+          <Outlet />
+        </section>
+      </main>
+      <footer>尾部</footer>
+    </>
+  );
+}

src/routers/photo.tsx

@@ -0,0 +1,3 @@
+export default function PhotoPage() {
+  return <h1>这里是photographs页面</h1>;
+}

src/routers/read.tsx

@@ -0,0 +1,3 @@
+export default function ReadPage() {
+  return <h1>这里是read路由页面</h1>;
+}

src/routers/video.tsx

@@ -0,0 +1,3 @@
+export default function VideoPage() {
+  return <h1>这里是video页面</h1>;
+}