Add pathless routes feature and complete

YSHgroup · YSHgroup · commit 705e99b13862 · 2023-12-26T07:37:50.000-05:00
diff --git a/index.html b/index.html
@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <meta name="description" content="This is built for learning the React Router 6.21">
+    <title>React Router Template</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,19 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-// import Root from './routes/root';
 import Index from './routes';
 import ErrorPage from './error-page';
 import Contact from './routes/contact';
 import Root, {
 	loader as rootLoader,
 	action as rootAction,
 } from './routes/root';
-import { loader as contactLoader, action as contactAction } from './routes/contact';
+import {
+	loader as contactLoader,
+	action as contactAction,
+} from './routes/contact';
 import './index.css';
 import EditContact from './routes/edit';
 import { action as editAction } from './routes/edit';
-// import DeleteContact from './routes/destroy'
 import { action as deleteAction } from './routes/destroy';
 
 const router = createBrowserRouter([
@@ -25,11 +26,11 @@ const router = createBrowserRouter([
 		action: rootAction,
 		children: [
 			{ index: true, element: <Index /> },
-			{	
+			{
 				path: 'contacts/:contactId',
 				element: <Contact />,
 				loader: contactLoader,
-				action: contactAction
+				action: contactAction,
 			},
 			{
 				path: 'contacts/:contactId/edit',
@@ -43,9 +44,38 @@ const router = createBrowserRouter([
 				action: deleteAction,
 				errorElement: <div>Oops! There was an error.</div>,
 			},
+			{
+				errorElement: <ErrorPage />,
+				children: [
+					{ index: true, element: <Index /> },
+					{
+						path: 'contacts/:contactId',
+						element: <Contact />,
+						loader: contactLoader,
+						action: contactAction,
+					},
+				],
+			},
 		],
 	},
 ]);
+/* Also we can configure the routes with JSX 
+	using by importing createRoutesFromElements in react-router-dom.
+	for example:
+		const router = createBrowserRouter(
+			createRoutesFromElements(
+				<Route
+				path="/"
+				element={<Root />}
+				loader={rootLoader}
+				action={rootAction}
+				errorElement={<ErrorPage />}
+				>
+					{...child routes configurations}
+				</Route>
+				)
+			)
+*/
 
 ReactDOM.createRoot(document.getElementById('root')).render(
 	<React.StrictMode>
diff --git a/src/routes/contact.jsx b/src/routes/contact.jsx
@@ -3,6 +3,12 @@ import { getContact, updateContact } from "../contacts";
 
 export const loader = async({params}) => {
   const contact = await getContact(params.contactId)
+  if(!contact) {
+    throw new Error("", {
+      status: 404,
+      statusText: "Not found"
+    })
+  }
   return {contact}
 }
 
@@ -88,6 +94,10 @@ function Favorite({ contact }) {
   // yes, this is a `let` for later
   const fetcher = useFetcher()
   let favorite = contact.favorite;
+  // Optimistic UI
+  if(fetcher.formData) {
+    favorite = fetcher.formData.get('favorite') === true
+  }
   return (
     <fetcher.Form method="post">
       <button
