Add Contact component and configure initial router

Author: YSHgroup

src/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!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+    </div>
+  );
+}

src/main.jsx

@@ -1,10 +1,20 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import Root from './routes/root'
+import ErrorPage from './error-page'
+// import App from './App.jsx'
 import './index.css'
 
+const router = createBrowserRouter([
+  { path: '/',
+  element: <Root/>,
+  errorElement: <ErrorPage />,
+}
+])
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )

src/routes/root.jsx

@@ -0,0 +1,43 @@
+export default function Root() {
+    return (
+      <>
+        <div id="sidebar">
+          <h1>React Router Contacts</h1>
+          <div>
+            <form id="search-form" role="search">
+              <input
+                id="q"
+                aria-label="Search contacts"
+                placeholder="Search"
+                type="search"
+                name="q"
+              />
+              <div
+                id="search-spinner"
+                aria-hidden
+                hidden={true}
+              />
+              <div
+                className="sr-only"
+                aria-live="polite"
+              ></div>
+            </form>
+            <form method="post">
+              <button type="submit">New</button>
+            </form>
+          </div>
+          <nav>
+            <ul>
+              <li>
+                <a href={`/contacts/1`}>Your Name</a>
+              </li>
+              <li>
+                <a href={`/contacts/2`}>Your Friend</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <div id="detail"></div>
+      </>
+    );
+  }