Adding one router rout

projects/2023TemplateWithVite/client/src/App.css

@@ -71,3 +71,7 @@ button.btn.btn-primary {
   margin-left: 2em;
   margin-right: 2em;
 }
+
+#contact{
+  padding: 5em;
+}

projects/2023TemplateWithVite/client/src/App.jsx

@@ -1,16 +1,23 @@
 import './App.css'
 import 'bootstrap/dist/css/bootstrap.min.css';
-import MyNavBar from './components/Navbar'
+import MyNavBar from './routes/Navbar'
 import ListStudents from './components/ListStudents'
-
+import React, { useState } from 'react'
+import { Outlet } from 'react-router-dom';
 
 function App() {
 
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleMe = () =>{
+    setIsClicked(true);
+  }
+
+
   return (
     <div className="App">
-      <MyNavBar />
-      <ListStudents />
-
+      <MyNavBar handleMe={handleMe} />
+      {isClicked ? <Outlet /> : <ListStudents /> }
     </div>
   )
 }

projects/2023TemplateWithVite/client/src/components/ListStudents.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
-import * as ioicons from 'react-icons/io5'
 import MyForm from './Form';
 import Student from './Student';
+import { Outlet} from "react-router-dom";
 
 const ListStudents = () => {
 
@@ -69,6 +69,9 @@ const ListStudents = () => {
                 })}
             </ul>
         </div>
+        <div id="detail">
+        <Outlet />
+      </div>
         <MyForm key={editingStudent ? editingStudent.id : null} onSaveStudent={onSaveStudent} editingStudent={editingStudent} onUpdateStudent={updateStudent} />
         </div>
     );

projects/2023TemplateWithVite/client/src/components/contact.jsx

@@ -0,0 +1,49 @@
+
+
+export default function Contact() {
+  const contact = {
+    first: "Cristina",
+    last: "Rodriguez",
+    avatar: "https://placekitten.com/g/200/200",
+    twitter: "yosola",
+    notes: "Some notes",
+    favorite: true,
+  };
+
+  return (
+    <div id="contact">
+      <div>
+        <img
+          key={contact.avatar}
+          src={contact.avatar || null}
+        />
+      </div>
+
+      <div>
+        <h1>
+          {contact.first || contact.last ? (
+            <>
+              {contact.first} {contact.last}
+            </>
+          ) : (
+            <i>No Name</i>
+          )}{" "}
+        </h1>
+
+        {contact.twitter && (
+          <p>
+            <a
+              target="_blank"
+              href={`https://twitter.com/${contact.twitter}`}
+            >
+              {contact.twitter}
+            </a>
+          </p>
+        )}
+
+        {contact.notes && <p>{contact.notes}</p>}
+
+        </div>
+        </div>
+        )
+    }

projects/2023TemplateWithVite/client/src/components/error-page.jsx

@@ -0,0 +1,16 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <div id="error-page">
+      <h1>Oops Techtonica template apologizes!!</h1>
+      <p>Sorry,  an unexpected error has occurred.</p>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+    </div>
+  );
+}

projects/2023TemplateWithVite/client/src/main.jsx

@@ -1,10 +1,33 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider,} from "react-router-dom";
 import './index.css'
+import ErrorPage from "./components/error-page";
+import Contact from "./components/contact";
+
+
+// /*
+// const router = createBrowserRouter(
+//   createRoutesFromElements(
+//     <Route path="/" element={<App />}>
+//       <Route path="login" element={<Contact />} />
+//       </Route>
+//       )
+//     );
+
+// */
+
+const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route path="/" element={<App />}>
+        <Route path="login" element={<Contact />} />
+        </Route>
+        )
+      );
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )

projects/2023TemplateWithVite/client/src/components/Navbar.jsx → projects/2023TemplateWithVite/client/src/routes/Navbar.jsx

@@ -2,10 +2,14 @@ import Container from 'react-bootstrap/Container';
 import Navbar from 'react-bootstrap/Navbar';
 import Nav from 'react-bootstrap/Nav';
 import Logo from '../assets/BlueTechtonicaWord.png'
-
+import { Link } from "react-router-dom";
 
 function MyNavBar(props) {
 
+  const handleClick = () =>{
+    props.handleMe();
+  }
+
   return (
     <>
     <Navbar bg="dark" variant="dark" sticky="top">
@@ -22,7 +26,7 @@ function MyNavBar(props) {
         <Navbar.Toggle />
         <Navbar.Collapse className="justify-content-end">
           <Navbar.Text>
-            Signed in as: <a href="#login">Cristina Rodriguez</a>
+            Signed in as: <Link onClick={handleClick} to={`/login`}>Cristina Rodriguez</Link>
           </Navbar.Text>
         </Navbar.Collapse>
       </Container>