package.json

@@ -47,7 +47,6 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "prettier": "^3.0.3",
-    "react-router-dom": "^6.20.0",
+    "typescript": "^5.2.2"
-    "typescript": "4.9.5"
   }
 }

src/App.css

@@ -38,12 +38,7 @@ body {
   overflow: clip;
 }
 
-.GalleryItem > .ImgLink {
+.GalleryItem > img,
-  margin: 0;
-  padding: 0;
-}
-
-.GalleryItem > .ImgLink > img,
 .GalleryItem > video {
   object-fit: contain;
   max-height: 80vh;

src/App.tsx

@@ -1,14 +1,12 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import './App.css';
+
 import Gallery from './Gallery/index';
 
 function App() {
   return (
-    <BrowserRouter>
+    <div className="App">
-      <Routes>
+      <Gallery />
-        <Route path="/photos/*" element={<Gallery />} />
+    </div>
-      </Routes>
-    </BrowserRouter>
   );
 }
 

src/Gallery/index.tsx

@@ -1,34 +1,21 @@
+import React from 'react';
 import '../App.css';
 import placeholderPng from './placeholder.png';
 import { useState, useEffect } from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
 
 function Gallery() {
-  const params = useParams<string>()['*'];
-  const location = useLocation();
-  const navigate = useNavigate();
-
   const [data, setData] = useState<galleryItemInfo[]>([]);
-  const [category, setCategory] = useState(params === undefined ? '' : params);
+  const [category, setCategory] = useState('');
 
   useEffect(() => {
     post(category, (data: galleryItemInfo[]) => {
-      if (data.length === 0) {
-        updateCategory('');
-      }
       setData(data);
     });
   }, [category]);
 
-  useEffect(() => {
-    setData(getPlaceholderData());
-    setCategory(params as string);
-  }, [location]);
-
   const updateCategory = (category: string) => {
-    setData(getPlaceholderData());
+    setData(getPlaceholderData);
     setCategory(category);
-    navigate(`/photos/${category}`);
   };
 
   return (
@@ -116,9 +103,7 @@ function ImageItem({ thumbnail_url, url, isPlaceholder }: galleryItem) {
       <a href={url} target="_blank">
         {getFileName(url)}
       </a>
-      <a href={url} target="_blank" className="ImgLink">
+      <img src={thumbnail_url} loading="lazy" />
-        <img src={thumbnail_url} loading="lazy" />
-      </a>
     </div>
   );
 }