测试自定义NavLink样式

zoujia · Jun 3, 2024 · a8afa9d · a8afa9d
1 parent 37cad4a
commit a8afa9d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/src/index.css b/src/index.css
@@ -229,7 +229,8 @@ i {
   background: #e3e3e3;
 }
 
-#sidebar nav a.active {
+#sidebar nav a.active,
+#sidebar nav a.active2 {
   background: hsl(224, 98%, 58%);
   color: white;
 }

diff --git a/src/main.jsx b/src/main.jsx
@@ -19,6 +19,10 @@ import DestroyContact, {
 } from './routes/destroy';
 import Index from './routes';
 
+function TestSpinner() {
+  return <div>Fallback-Spinner...</div>;
+}
+
 // Solution-2: create routes using JSX
 const routerUsingElements = createBrowserRouter(
   createRoutesFromElements(
@@ -96,6 +100,6 @@ const router = createBrowserRouter([
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <RouterProvider router={routerUsingElements} />
+    <RouterProvider router={routerUsingElements} fallbackElement={<TestSpinner />} />
   </React.StrictMode>,
 );
diff --git a/src/routes/root.jsx b/src/routes/root.jsx
@@ -76,8 +76,11 @@ export default function Root() {
                             <li key={contact.id}>
                                 <NavLink
                                     to={`contacts/${contact.id}`}
+                                    // passing a function to className
+                                    // to customzie the state class
+                                    // 'active' is default for active-state
                                     className={({isActive, isPending}) => {
-                                        return isActive ? 'active' : (isPending ? 'pending' : '');
+                                        return isActive ? 'active2' : (isPending ? 'pending' : '');
                                     }}
                                 >
                                     {contact.first || contact.last ? (