From 0f4ef7a54e29c5352db1b6bfc09563103f63552e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Schr=C3=B6ter?= <dev@felschr.com>
Date: Tue, 15 Nov 2022 23:29:22 +0100
Subject: [PATCH] fix: navigation links cause reload

Fixed by using Gatsby Link components.
---
 src/components/organisms/Layout.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/organisms/Layout.tsx b/src/components/organisms/Layout.tsx
index c7176ec..7751562 100644
--- a/src/components/organisms/Layout.tsx
+++ b/src/components/organisms/Layout.tsx
@@ -6,8 +6,8 @@ import { Link as GatsbyLink } from "gatsby"
 import { Footer } from "../atoms/Footer"
 
 const pages = [
-  { title: "Home", href: "/" },
-  { title: "Blog", href: "/blog" },
+  { title: "Home", to: "/" },
+  { title: "Blog", to: "/blog" },
 ]
 
 type LayoutProps = {
@@ -45,12 +45,13 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
           </Typography>
 
           <Box sx={{ flexGrow: 1, display: "flex", justifyContent: "end" }}>
-            {pages.map(({ title, href }) => (
+            {pages.map(({ title, to }) => (
               <Button
-                key={href}
+                LinkComponent={GatsbyLink}
+                key={to}
                 color="inherit"
                 sx={{ my: 2, color: "white", display: "block" }}
-                {...{ href }}
+                {...{ to }}
               >
                 {title}
               </Button>