From fbc25412308fa46e665a93d6c2f866ff52fda998 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Tue, 29 Mar 2022 15:52:21 +1100
Subject: [PATCH] Chap05 -> Declaring routes -> Creating a component containing
 routes

---
 QandA/frontend/src/App.tsx | 38 +++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/QandA/frontend/src/App.tsx b/QandA/frontend/src/App.tsx
index 1fb4cb7..c1671d7 100644
--- a/QandA/frontend/src/App.tsx
+++ b/QandA/frontend/src/App.tsx
@@ -2,29 +2,33 @@
 import { css } from '@emotion/react';
 
 import React from 'react';
-import { Header } from './Header';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
 import { HomePage } from './HomePage';
 import { fontFamily, fontSize, gray2 } from './Styles';
+import { AskPage } from './AskPage';
+import { SearchPage } from './SearchPage';
+import { SignInPage } from './SignInPage';
 
 function App() {
   return (
-    <div
-      css={css`
-        font-family: ${fontFamily};
-        font-size: ${fontSize};
-        color: ${gray2};
-      `}
-    >
-      <Header />
-      <HomePage />
-    </div>
+    <BrowserRouter>
+      <div
+        css={css`
+          font-family: ${fontFamily};
+          font-size: ${fontSize};
+          color: ${gray2};
+        `}
+      >
+        <Routes>
+          <Route path="" element={<HomePage />} />
+          <Route path="search" element={<SearchPage />} />
+          <Route path="ask" element={<AskPage />} />
+          <Route path="signin" element={<SignInPage />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
   );
 }
 
-class ProblemComponent extends React.Component {
-  render() {
-    return <div ref="div" />;
-  }
-}
-
 export default App;