Added more pages and routing

package.json

@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.6.2",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
     "antd": "^4.14.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.1"
   },

src/App.js

@@ -1,26 +1,41 @@
 import { Layout } from 'antd';
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import './App.css';
 
 import Nav from './components/nav'
 import Home from './components/home'
+import Account from './components/account'; 
+import Dogs from './components/dogs';
+import Login from './components/login';
+import Register from './components/register';
 
 const { Header, Content, Footer } = Layout;
 
 function App() {
   return (
-    <Layout>
-
-      <Header>
-        <Nav />
-      </Header>
-
-      <Content style={{ padding: '0 50px' }}>
-        <Home />
-      </Content>
 
-      <Footer>test</Footer>
+    <Layout>
+
+      <Router>
+        <Header>
+          <Nav />
+        </Header>
+
+        <Content style={{ padding: '0 50px' }}>
+          <Switch>
+            <Route path="/account" children={<Account />}/>
+            <Route path="/login" children={<Login />}/>
+            <Route path="/register" children={<Register />}/>
+            <Route path="/dog/:id" children={<Dogs />}/>
+            <Route path="/" children={<Home />}/>
+          </Switch>
+        </Content>
+
+        <Footer>test</Footer>
+      </Router>
 
     </Layout>
+
   );
 }
 

src/components/account.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function Account(props) {
+  return (
+    <>
+      <h1>Account</h1>
+      <p>This is where account information will be displayed</p>
+    </>
+  );
+}
+
+export default Account;

src/components/dogs.js

@@ -0,0 +1,14 @@
+import React from 'react'; 
+import { useParams } from 'react-router-dom';
+
+function Dogs(props) { 
+    let { id } = useParams();
+    return ( 
+        <> 
+            <h1>Dog ID: {id}</h1> 
+            <p>This is where individual dog posts can be displayed</p> 
+        </> 
+    ); 
+}
+
+export default Dogs;