Display nav-link states

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -1,8 +1,4 @@
----
-title: Basic (Data Router)
-toc: false
-order: 1
----
+https://pudek357.github.io/react-router-route-lazy
 
 # Data Routers
 

src/RootLayout.tsx

@@ -1,4 +1,34 @@
-import { Link, Outlet, useLocation, useNavigation } from "react-router-dom";
+import type { ComponentProps, ReactNode } from "react";
+import {
+  NavLink as BaseNavLink,
+  Outlet,
+  useLocation,
+  useNavigation,
+} from "react-router-dom";
+
+const NavLink = ({
+  to,
+  children,
+}: ComponentProps<typeof BaseNavLink> & { children: ReactNode }) => (
+  <BaseNavLink
+    to={to}
+    className="nav-link"
+    end={to === "/react-router-route-lazy/"}
+    unstable_viewTransition
+  >
+    {({ isActive, isPending, isTransitioning }) => (
+      <>
+        <span className="nav-link-route">{children}</span>
+
+        <span className="nav-link-state">
+          {isActive && <span className="nav-link-state-item">A</span>}
+          {isPending && <span className="nav-link-state-item">P</span>}
+          {isTransitioning && <span className="nav-link-state-item">T</span>}
+        </span>
+      </>
+    )}
+  </BaseNavLink>
+);
 
 export const RootLayout = () => {
   const { pathname } = useLocation();
@@ -11,13 +41,13 @@ export const RootLayout = () => {
       <div className="main-content">
         <div className="sidebar">
           <div>
-            <Link to="/react-router-route-lazy/">root</Link>
+            <NavLink to="/react-router-route-lazy/">root</NavLink>
           </div>
           <div>
-            <Link to="/react-router-route-lazy/foo">foo</Link>
+            <NavLink to="/react-router-route-lazy/foo">foo</NavLink>
           </div>
           <div>
-            <Link to="/react-router-route-lazy/bar">bar</Link>
+            <NavLink to="/react-router-route-lazy/bar">bar</NavLink>
           </div>
         </div>
 

src/index.css

@@ -80,3 +80,25 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.nav-link {
+  display: flex;
+  height: 22px;
+  text-decoration: none;
+}
+
+.nav-link-route {
+  width: 40px;
+}
+
+.nav-link-state {
+  margin-left: 4px;
+  display: flex;
+}
+
+.nav-link-state-item {
+  width: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}