Refactor routing in App.js and update navigation links in HeroSection…

….js and NavSection.js
kpatel0170 · May 27, 2024 · 2ae5a18 · 2ae5a18
1 parent 01da875
commit 2ae5a18
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 25 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,38 +3,61 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 import NavBar from "./components/NavBar/NavBar";
 import Footer from "./components/Footer/Footer";
-import Resume from "./components/Resume/Resume";
-import HomePage from "./pages/Home/Home";
-import Project from "./pages/Project/Project";
-import Education from "./pages/Education/Education";
-import Experience from "./pages/Experience/Experience";
+const Project = React.lazy(() => import("./pages/Project/Project"));
+const Education = React.lazy(() => import("./pages/Education/Education"));
+const Experience = React.lazy(() => import("./pages/Experience/Experience"));
+const HomePage = React.lazy(() => import("./pages/Home/Home"));
+const Resume = React.lazy(() => import("./components/Resume/Resume"));
+
 
 const routes = [
   { path: "/", element: <HomePage /> },
   { path: "/projects", element: <Project /> },
   { path: "/education", element: <Education /> },
   { path: "/experience", element: <Experience /> },
-  { path: "/resume", element: <Resume /> }
+  { path: "/resume", element: <Resume /> },
+  { path: "*", element: <HomePage /> }, 
 ];
 
+
+const Spinner = () => (
+<div class="flex items-center justify-center h-screen">
+    <div class="relative">
+        <div class="h-24 w-24 rounded-full border-t-8 border-b-8 border-gray-200"></div>
+        <div class="absolute top-0 left-0 h-24 w-24 rounded-full border-t-8 border-b-8 border-blue-500 animate-spin">
+        </div>
+    </div>
+</div>
+);
+
 const Layout = ({ children }) => (
-  <>
+  <div className="flex flex-col min-h-screen">
     <NavBar />
-    <main className="">{children}</main>
+    <main className="flex-grow">{children}</main>
     <Footer />
-  </>
+  </div>
 );
 
-const App = () => (
-  <Router>
-    <Suspense fallback={<div>Loading...</div>}>
-      <Routes>
-        {routes.map(({ path, element }, index) => (
-          <Route key={index} path={path} element={<Layout>{element}</Layout>} />
-        ))}
-      </Routes>
-    </Suspense>
-  </Router>
-);
+
+function App() {
+  const routeElements = routes.map(({ path, element }, index) => (
+    <Route key={index} path={path} element={element} />
+  ));
+
+  return (
+    <Router>
+      <Suspense fallback={<Spinner />}>
+        <Layout>
+          <Routes>{routeElements}</Routes>
+        </Layout>
+      </Suspense>
+    </Router>
+  );
+}
+
 
 export default App;
+
+
+
+
diff --git a/src/components/HeroSection/HeroSection.js b/src/components/HeroSection/HeroSection.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React from "react";
+import { Link } from "react-router-dom";
 import {
   FaLinkedin,
   FaDev,
@@ -25,15 +26,15 @@ const renderSocialLinks = (sociallinks) => {
   return sociallinks.map((link, index) => {
     const IconComponent = iconMap[link.icon];
     return (
-      <a
+      <Link
         key={index}
-        href={link.url}
+        to={link.url}
         target="_blank"
         rel="noopener noreferrer"
         className="inline-flex items-center  border border-transparent text-sm leading-5 font-medium rounded-md  text-slate-200 hover:text-slate-400 focus:outline-none  focus:shadow-outline-black  transition duration-150 ease-in-out"
       >
         <IconComponent className="w-5 h-5 mr-1" />
-      </a>
+      </Link>
     );
   });
 };

diff --git a/src/components/NavSection/NavSection.js b/src/components/NavSection/NavSection.js
@@ -5,6 +5,7 @@ import {
   FaFolderOpen,
   FaBookOpen
 } from "react-icons/fa";
+import { Link } from "react-router-dom";
 
 const data = {
   "subheading":
@@ -61,13 +62,13 @@ function NavSection() {
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
         {data.cards.map((card, index) => (
-          <a key={index} href={card.url} rel="noopener noreferrer">
+          <Link key={index} onTouchCancel={card.url} rel="noopener noreferrer">
             <IconCard
               icon={icons[index]}
               heading={card.heading}
               description={card.description}
             />
-          </a>
+          </Link>
         ))}
       </div>
     </section>