Implement react router

src/App.tsx

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

src/Gallery/index.tsx

@@ -1,21 +1,34 @@
-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('');
+  const [category, setCategory] = useState(params === undefined ? '' : params);
 
   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 (