Merge pull request #1 from parthpandyappp/feat-routes

[Feat]: Routes setup

package.json

@@ -10,6 +10,7 @@
     "mockman-js": "^1.1.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "uuid": "^8.3.2"
   },

public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

src/App.js

@@ -1,8 +1,13 @@
+import { Routes } from "./routes"
+import { Nav, Footer } from "./components"
+
 function App() {
   return (
-    <h1 className="text-3xl font-bold underline">
-      Hello world!
-    </h1>
+    <>
+      <Nav />
+      <Routes />
+      <Footer />
+    </>
   )
 }
 export default App;

src/components/Footer.jsx

@@ -0,0 +1,5 @@
+const Footer = () => {
+  return <h1>Footer</h1>;
+};
+
+export { Footer };

src/components/Nav.jsx

@@ -0,0 +1,5 @@
+const Nav = () => {
+  return <h1>Nav</h1>;
+};
+
+export { Nav };

src/components/index.js

@@ -0,0 +1,2 @@
+export * from "./Footer"
+export * from "./Nav"

src/index.js

@@ -3,13 +3,16 @@ import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
 import { makeServer } from "./server";
+import { BrowserRouter as Router } from "react-router-dom";
 
 // Call make Server
 makeServer();
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>,
   document.getElementById("root")
 );

src/pages/Bookmarks.jsx

@@ -0,0 +1,5 @@
+const BookMarks = () => {
+  return <h1>BookMarks</h1>;
+};
+
+export { BookMarks };

src/pages/Explore.jsx

@@ -0,0 +1,5 @@
+const Explore = () => {
+  return <h1>Explore</h1>;
+};
+
+export { Explore };

src/pages/Home.jsx

@@ -0,0 +1,5 @@
+const Home = () => {
+  return <h1>Home</h1>;
+};
+
+export { Home };

src/pages/NotFound.jsx

@@ -0,0 +1,5 @@
+const NotFound = () => {
+  return <h1>NotFound</h1>;
+};
+
+export { NotFound };

src/pages/Profile.jsx

@@ -0,0 +1,5 @@
+const Profile = () => {
+  return <h1>Profile</h1>;
+};
+
+export { Profile };

src/pages/index.js

@@ -0,0 +1,4 @@
+export { Home } from "./Home";
+export { Profile } from "./Profile"
+export { Explore } from "./Explore";
+export { BookMarks } from "./Bookmarks";

src/routes/Endpoints.jsx

@@ -0,0 +1,16 @@
+import { Routes, Route } from "react-router-dom";
+import { Home, Explore, BookMarks, Profile } from "../pages";
+import { NotFound } from "../pages/NotFound";
+const Endpoints = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/explore" element={<Explore />} />
+      <Route path="/bookmarks" element={<BookMarks />} />
+      <Route path="/profile" element={<Profile />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+};
+
+export { Endpoints as Routes };

src/routes/index.js

@@ -0,0 +1 @@
+export * from "./Endpoints"