smoother page transitions

Author: Kraysent

src/App.tsx

@@ -14,74 +14,48 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route
-          path="/"
-          element={
-            <Layout>
-              <SearchBar logoSize="large" />
-              <HomePage />
-            </Layout>
-          }
-        />
-        <Route
-          path="/query"
-          element={
-            <Layout>
-              <SearchResultsPage />
-            </Layout>
-          }
-        />
-        <Route
-          path="/object/:pgcId"
-          element={
-            <Layout>
-              <SearchBar />
-              <ObjectDetailsPage />
-            </Layout>
-          }
-        />
-        <Route
-          path="/table/:tableName"
-          element={
-            <Layout>
-              <TableDetailsPage />
-            </Layout>
-          }
-        />
-        <Route
-          path="/tables"
-          element={
-            <Layout>
-              <TablesPage />
-            </Layout>
-          }
-        />
-        <Route
-          path="/crossmatch"
-          element={
-            <Layout>
-              <CrossmatchResultsPage />
-            </Layout>
-          }
-        />
-        <Route
-          path="/records/:recordId/crossmatch"
-          element={
-            <Layout>
-              <SearchBar />
-              <RecordCrossmatchDetailsPage />
-            </Layout>
-          }
-        />
-        <Route
-          path="*"
-          element={
-            <Layout>
-              <SearchBar />
-              <NotFoundPage />
-            </Layout>
-          }
-        />
+        <Route element={<Layout />}>
+          <Route
+            path="/"
+            element={
+              <>
+                <SearchBar logoSize="large" />
+                <HomePage />
+              </>
+            }
+          />
+          <Route path="/query" element={<SearchResultsPage />} />
+          <Route
+            path="/object/:pgcId"
+            element={
+              <>
+                <SearchBar />
+                <ObjectDetailsPage />
+              </>
+            }
+          />
+          <Route path="/table/:tableName" element={<TableDetailsPage />} />
+          <Route path="/tables" element={<TablesPage />} />
+          <Route path="/crossmatch" element={<CrossmatchResultsPage />} />
+          <Route
+            path="/records/:recordId/crossmatch"
+            element={
+              <>
+                <SearchBar />
+                <RecordCrossmatchDetailsPage />
+              </>
+            }
+          />
+          <Route
+            path="*"
+            element={
+              <>
+                <SearchBar />
+                <NotFoundPage />
+              </>
+            }
+          />
+        </Route>
       </Routes>
     </BrowserRouter>
   );

src/components/core/Link.tsx

@@ -1,4 +1,5 @@
 import { ReactElement, ReactNode } from "react";
+import { Link as RouterLink } from "react-router-dom";
 import { MdOpenInNew } from "react-icons/md";
 
 interface LinkProps {
@@ -14,22 +15,25 @@ export function Link(props: LinkProps): ReactElement {
   const className = props.className
     ? `${baseClass} ${props.className}`
     : baseClass;
+  const combinedClassName = `${className} inline-flex items-center gap-1`;
 
-  const linkProps = props.external
-    ? {
-        target: "_blank",
-        rel: "noopener noreferrer",
-      }
-    : {};
+  if (props.external) {
+    return (
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={props.href}
+        className={combinedClassName}
+      >
+        {content}
+        <MdOpenInNew />
+      </a>
+    );
+  }
 
   return (
-    <a
-      {...linkProps}
-      href={props.href}
-      className={`${className} inline-flex items-center gap-1`}
-    >
+    <RouterLink to={props.href} className={combinedClassName}>
       {content}
-      {props.external && <MdOpenInNew />}
-    </a>
+    </RouterLink>
   );
 }

src/components/ui/Layout.tsx

@@ -1,11 +1,14 @@
+import { Outlet } from "react-router-dom";
 import { Navbar } from "./Navbar";
 
-export function Layout({ children }: { children: React.ReactNode }) {
+export function Layout() {
   return (
     <div className="min-h-screen flex">
       <Navbar />
       <div className="ml-12 flex flex-col flex-grow min-h-screen">
-        <div className="flex-grow p-8">{children}</div>
+        <div className="flex-grow p-8">
+          <Outlet />
+        </div>
       </div>
     </div>
   );