second nav level

src/components/settings/RouterExperiment/Link.tsx

@@ -1,10 +1,14 @@
 import React, { ComponentPropsWithRef } from "react";
 import { Link as RouterLink } from "react-router-dom";
 
-export const Link: React.FC<ComponentPropsWithRef<typeof RouterLink>> = (
+export const MyLink: React.FC<ComponentPropsWithRef<typeof RouterLink>> = (
   props,
 ) => {
-  return <RouterLink {...props} onClick={(e) => e.stopPropagation()} />;
+  const title =
+    typeof props.to === "string" ? props.to : props.to.pathname ?? "";
+  return (
+    <RouterLink {...props} onClick={(e) => e.stopPropagation()} title={title} />
+  );
 };
 
-Link.displayName = "Link";
+MyLink.displayName = "MyLink";

src/components/settings/RouterExperiment/RouterExperiment.tsx

@@ -11,30 +11,29 @@ import {
   Route,
   Routes,
   useLocation,
-  useMatch,
   useParams,
 } from "react-router-dom";
 
 import { ThemeContext } from "../../../themes/ThemeContext";
 import { absoluteCover } from "../../absoluteCover";
-import { Link } from "./Link";
+import { MyLink } from "./Link";
 
 function CardCategoryList() {
   return (
     <>
       <div>
         <h1>Card categories</h1>
         <div>
-          <Link to="/1">Card 1</Link>
+          <MyLink to="/1">Card 1</MyLink>
         </div>
         <div>
-          <Link to="/2">Card 2</Link>
+          <MyLink to="/2">Card 2</MyLink>
         </div>
         <div>
-          <Link to="/3">Card 3</Link>
+          <MyLink to="/3">Card 3</MyLink>
         </div>
         <div>
-          <Link to="/4">Card 4</Link>
+          <MyLink to="/4">Card 4</MyLink>
         </div>
         <hr />
         <div>{/* <Link to="/5">Card 5</Link> */}</div>
@@ -53,11 +52,32 @@ function CardDetails() {
   }, [id]);
   return (
     <>
-      <h1>Card details</h1>
+      <h1>Card {id}</h1>
       <div>
         <input value={text} onChange={(e) => setText(e.target.value)} />
       </div>
-      <div>Card id is {id}</div>
+      <h3>Widgets</h3>
+      <div>
+        <MyLink to="widgets/1">Widget 1</MyLink>{" "}
+      </div>
+      <div>
+        <MyLink to="widgets/2">Widget 2</MyLink>{" "}
+      </div>
+      <div>
+        <MyLink to="widgets/3">Widget 3</MyLink>{" "}
+      </div>
+      <div>
+        <MyLink to="widgets/4">Widget 4</MyLink>{" "}
+      </div>
+    </>
+  );
+}
+
+function WidgetsDetail() {
+  const { widgetIid } = useParams();
+  return (
+    <>
+      <h1>Widget {widgetIid}</h1>
     </>
   );
 }
@@ -71,7 +91,7 @@ function Layout() {
       }}
     >
       <div>
-        {pathname} {pathname !== "/" && <Link to="/">Home</Link>}
+        {pathname} {pathname !== "/" && <MyLink to="/">Home</MyLink>}
       </div>
       <hr />
       <Outlet />
@@ -118,16 +138,17 @@ function PanelWrapper({ children }: PropsWithChildren) {
         }}
       >
         <div>
-          <Link to={parentPath}>
+          <MyLink to={parentPath}>
             <FaChevronLeft />
             Back
-          </Link>
+          </MyLink>
+          , Current path: {pathname}, Parent path: {parentPath}
         </div>
         <div css={{ flex: 1 }}>{children}</div>
+        <ParentPathContext.Provider value={pathname}>
+          <Outlet />
+        </ParentPathContext.Provider>
       </div>
-      <ParentPathContext.Provider value={pathname}>
-        <Outlet />
-      </ParentPathContext.Provider>
     </>
   );
 }
@@ -149,7 +170,16 @@ export function RouterExperiment() {
                   <CardDetails />
                 </PanelWrapper>
               }
-            />
+            >
+              <Route
+                path="widgets/:widgetIid"
+                element={
+                  <PanelWrapper>
+                    <WidgetsDetail />
+                  </PanelWrapper>
+                }
+              />
+            </Route>
           </Route>
         </Route>
       </Routes>