From 6d5af0a85645b0f6a90c0f416f6d28bc56d7a16d Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Tue, 29 Mar 2022 16:22:23 +1100
Subject: [PATCH] Chap05 -> Implementing links -> Using the Link component

---
 QandA/frontend/src/Header.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/QandA/frontend/src/Header.tsx b/QandA/frontend/src/Header.tsx
index 3fa1292..010f0d8 100644
--- a/QandA/frontend/src/Header.tsx
+++ b/QandA/frontend/src/Header.tsx
@@ -1,9 +1,10 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
-
 import React from 'react';
+import { Link } from 'react-router-dom';
+
 import { UserIcon } from './Icons';
+import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
 
 export const Header = () => {
   const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -26,8 +27,8 @@ export const Header = () => {
         box-shadow: 0 3px 7px 0 rgba(100, 112, 114, 0.21);
       `}
     >
-      <a
-        href="./"
+      <Link
+        to="/"
         css={css`
           font-size: 24px;
           font-weight: bold;
@@ -36,7 +37,7 @@ export const Header = () => {
         `}
       >
         Q & A
-      </a>
+      </Link>
       <input
         type="text"
         placeholder="Search ..."
@@ -57,8 +58,8 @@ export const Header = () => {
           }
         `}
       />
-      <a
-        href="./signin"
+      <Link
+        to="signin"
         css={css`
           font-family: ${fontFamily};
           font-size: ${fontSize};
@@ -83,7 +84,7 @@ export const Header = () => {
         >
           Sign In
         </span>
-      </a>
+      </Link>
     </div>
   );
 };