添加新页面

src/error-page.jsx

@@ -0,0 +1,16 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+    const error = useRouteError();
+    console.log('>> ErrorPage 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

@@ -2,11 +2,19 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import Root from './routes/root';
+import ErrorPage from './error-page';
+import Contact from './routes/contact';
 
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <div>Hello world!</div>
+    element: <Root />,
+    errorElement: <ErrorPage />
+  },
+  {
+    path: 'contacts/:contactId',
+    element: <Contact />
   }
 ]);
 

src/routes/contact.jsx

@@ -0,0 +1,24 @@
+export default function Contact() {
+    const contact = {
+        first: "Your",
+        last: "Name",
+        avatar: "https://placekitten.com/g/200/200",
+        twitter: "your_handle",
+        notes: "Some notes",
+        favorite: true,
+    };
+
+    return (
+        <div id="contact">
+            <div>
+                <img
+                    key={contact.avatar}
+                    src={contact.avatar || null}
+                />
+            </div>
+            <div>
+                {/* TODO: */}
+            </div>
+        </div>
+    )
+}

src/routes/root.jsx

@@ -0,0 +1,43 @@
+export default function Root() {
+    return (
+        <>
+            <div id="sidebar">
+                <h1>React Rooter 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>
+        </>
+    );
+}