Basic Routing

src/App.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { googleLogout, useGoogleLogin } from '@react-oauth/google';
 import axios from 'axios';
+import Settings from './settings';
+import LoggedIn from './loggedIn';
 
 interface User {
     access_token: string;
@@ -64,6 +66,14 @@ function App() {
                 <button onClick={() => login()}>Sign in with Google 🚀</button>
             )}
         </div>
+        <div>
+        <Router>
+            <Routes>
+                <Route path="/loggedIn" element={<LoggedIn />} />
+                <Route path="/settings" element={<Settings />} />
+            </Routes>
+        </Router>
+        </div>
     );
 }
 

src/loggedIn.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+  const LoggedIn = () => {
+    const navigate = useNavigate();
+    const handleClick = () => navigate('/');
+        return (
+          <button type="button" onClick={handleClick}>
+            Go Home
+          </button>
+        );
+
+    }
+
+    export default LoggedIn;

src/settings.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+  const Settings = () => {
+    const navigate = useNavigate();
+    const handleClick = () => navigate('/');
+        return (
+          <button type="button" onClick={handleClick}>
+            Home
+          </button>
+        );
+
+    }
+
+    export default Settings;