Chap05 -> Declaring routes -> Creating a component containing routes

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;