Merge pull request #428 from MastanSayyad/main

Bug 🐞 Routing Navigation Error "404 Page Not Found" After Refreshing Pages

src/components/Navbar/Navbar.jsx

@@ -113,10 +113,10 @@ function Navbar() {
           </li>
           {renderAPODLink()}
           <li className="navbar-list-item" onClick={handleMenuClose}>
-            <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/mars-rover">MartianImagery</NavLink>
+            <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/marsrover">MartianImagery</NavLink>
           </li>
           <li className="navbar-list-item" onClick={handleMenuClose}>
-            <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/nasa-projects">NASA's Projects</NavLink>
+            <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/nasaprojects">NASA's Projects</NavLink>
           </li>
           <li className="navbar-list-item" onClick={handleMenuClose}>
             <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/about">About us</NavLink>

src/main.jsx

@@ -13,9 +13,9 @@ const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path='/' element={<App />}>
       <Route index element={<Home />} />
-      <Route path='mars-rover' element={<MarsRover />} />
-      <Route path='nasa-projects' element={<NasaProjects />} />
-      <Route path='about' element={<About />} />
+      <Route path='/marsrover' element={<MarsRover />} />
+      <Route path='/nasaprojects' element={<NasaProjects />} />
+      <Route path='/about' element={<About />} />
       <Route path='*' element={<NotFoundPage />} />
     </Route>
   )

vercel.json

@@ -0,0 +1,5 @@
+{
+    "rewrites": [
+        {"source": "/(.*)", "destination": "/"}
+    ]
+}