Move browser router to app.tsx

Author: GreenMan36

src/App.tsx

@@ -1,4 +1,4 @@
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, BrowserRouter } from "react-router-dom";
 import Header from "./layouts/Header";
 import Banner from "./layouts/Banner";
 import Footer from "./layouts/Footer";
@@ -8,15 +8,17 @@ import SearchPage from "./pages/SearchPage.tsx";
 const App = () => {
   return (
     <div className="container flow">
-      <Header />
-      <Banner />
-      <main className="main">
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/search" element={<SearchPage />} />
-        </Routes>
-      </main>
-      <Footer />
+      <BrowserRouter>
+        <Header />
+        <Banner />
+        <main className="main">
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/search" element={<SearchPage />} />
+          </Routes>
+        </main>
+        <Footer />
+      </BrowserRouter>
     </div>
   );
 };

src/main.tsx

@@ -3,14 +3,11 @@ import { createRoot } from "react-dom/client";
 import "./styles/main.css";
 import App from "./App";
 import { AppProvider } from "./contexts/AppContext";
-import { BrowserRouter } from "react-router-dom";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <BrowserRouter>
-      <AppProvider>
-        <App />
-      </AppProvider>
-    </BrowserRouter>
+    <AppProvider>
+      <App />
+    </AppProvider>
   </StrictMode>
 );