Create React Router DOM for the upload pages

src/App.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Route, Routes } from "react-router-dom";
 import { Navbar } from "./components";
-import { Academics, Upload, Clubs, Careers, Instructions, Welcome } from "./pages";
+import { Academics, Upload, Clubs, Careers, Instructions, Welcome, UploadFile, UploadLink, UploadInput } from "./pages";
 // import Navbar from "./components/Navbar";
 // import Home from "./pages/Home";
 // import Academics from "./pages/Academics";
@@ -19,11 +19,14 @@ function App() {
       <div className="appContainer">
         <Routes>
           <Route path="/academics" element={<Academics />} />
-          <Route path="/upload" element={<Upload />} />
-          <Route path="/instructions" element={<Instructions />} />
           <Route path="/home/academics" element={<Academics />} />
           <Route path="/home/clubs" element={<Clubs />} />
           <Route path="/home/career" element={<Careers />} />
+          <Route path="/upload" element={<Upload />} />
+          <Route path="/upload/file" element={<UploadFile />} />
+          <Route path="/upload/link" element={<UploadLink />} />
+          <Route path="/upload/input" element={<UploadInput />} />
+          <Route path="/instructions" element={<Instructions />} />
           <Route path="/welcome" element={<Welcome />} />
         </Routes>
       </div>

src/pages/Upload.tsx

@@ -1,22 +1,34 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 
 const AcademicButton: React.FC = () => {
+  let navigate = useNavigate();
+  const routeChange = () => {
+    let path = `/upload/file`;
+    navigate(path);
+  };
+
   return (
     <button
-      // onClick={onClick}
+      onClick={routeChange}
       className="rounded-[5px] border border-[#1F4C4C] bg-[#1F4C4C] px-14 py-2 text-white"
     >
       Academic
     </button>
   );
-
-}
+};
 
 const ClubButton: React.FC = () => {
+  let navigate = useNavigate();
+  const routeChange = () => {
+    let path = `/upload/file`;
+    navigate(path);
+  };
+
   return (
     <button
-      // onClick={onClick}
-      className="rounded-[5px] border border-[#1F4C4C] px-14 py-2 text-[#1F4C4C]"
+    onClick={routeChange}
+    className="rounded-[5px] border border-[#1F4C4C] px-14 py-2 text-[#1F4C4C]"
     >
       Club
     </button>
@@ -37,6 +49,6 @@ const Upload: React.FC = () => {
       </div>
     </div>
   );
-}
+};
 
-export {Upload};
+export { Upload };

src/pages/UploadFile.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+function UploadFile() {
+    return(
+        <>
+        <h1>File</h1>
+        </>
+    )
+}
+
+export {UploadFile};

src/pages/UploadInput.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+function UploadInput() {
+    return(
+        <>
+        <h1>Input</h1>
+        </>
+    )
+}
+
+export {UploadInput};

src/pages/UploadLink.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+function UploadLink() {
+    return(
+        <>
+        <h1>Link</h1>
+        </>
+    )
+}
+
+export {UploadLink};

src/pages/Welcome.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { GoogleLogin } from "@react-oauth/google";
+import { useNavigate } from "react-router-dom";
 
 function GoogleSigninButton() {
   return (
@@ -21,9 +22,15 @@ interface GuestSigninButtonProps {
 }
 
 const GuestSigninButton: React.FC<GuestSigninButtonProps> = ({ onClick }) => {
+  let navigate = useNavigate(); 
+  const routeChange = () =>{ 
+    let path = `/home/academics`; 
+    navigate(path);
+  }
+
   return (
     <button
-      onClick={onClick}
+      onClick={routeChange}
       className="rounded-[5px] border border-[#1F4C4C] px-14 py-2 text-[#1F4C4C]"
     >
       Continue as Guest

src/pages/index.ts

@@ -3,4 +3,7 @@ export * from "./Careers";
 export * from "./Clubs";
 export * from "./Instructions";
 export * from "./Upload";
+export * from "./UploadFile";
+export * from "./UploadLink";
+export * from "./UploadInput";
 export * from "./Welcome";