link not active for the current route

[nivethan-me]

following is my current App routing

export default function App() {
  return (
    <Router>
      <Route path='/dashboard' component={Dashboard} />

      <Route path='/email-templates' nest>
        <Route path='/' component={EmailTemplates} />
        <Route path=':id' component={ManageEmail} />
      </Route>

      <Route path='/user-management' nest>
        <Route path='/manage' component={ManageUser} />
        <Route path='/register' component={RegisterUser} />
        <Route path='/edit/:id' component={EditUser} />

        <Route path='/roles' nest>
          <Route path='/' component={UserRoles} />
          <Route path='/edit' component={EditUserRoles} />
        </Route>

        <Route path='/permission' component={UserPermission} />
      </Route>
      
      <Route path='/audit-log' component={AuditLog} />
    </Router>
  );
}

Logic to get active state

export default function MultiLink(props: Props) {
  const { name, Icon, isSidebarOpen, href, subLinks } = props;

  const [isActive] = useRoute(href);
  console.log(parentHref, isActive);
  }

following is what i see on my console. isActive is not becoming true on nested routes. but working fine on other pages.

/dashboard true
/audit-log true

/email-templates false
/user-management false

[molefrog]

isActive is not becoming true on nested routes

It depends on where in your component tree this function is called. Is this a link that is inside <Route path='/email-templates' nest>? If so, then the href should be /

[nivethan-me]

isActive is not becoming true on nested routes

It depends on where in your component tree this function is called. Is this a link that is inside <Route path='/email-templates' nest>? If so, then the href should be /

@molefrog thank you for the reply, i'm not sure i understand you fully, let me give you some more info

so basically i'm trying to highlight the active page on sidebar. i created a sidebar layout and wrap all page components using that like following. (let me know if i can improve this approach something like <Outlet /> in RR)

export default function EmailTemplates(props: Props) {
 const {} = props;
 return (
   <PrivateLayout>
     <div>
       <h1>Email Template</h1>
     </div>
   </PrivateLayout>
 );
}

This <PrivateLayout/> has the sidebar component

export default function PrivateLayout(props: Props) {
 const { children } = props;
 const [isSidebarOpen, setIsSidebarOpen] = useState(true);

 const toggleSidebar = () => {
   setIsSidebarOpen(!isSidebarOpen);
 };

 return (
   <div className=''>
     <NavigationBar isSidebarOpen={isSidebarOpen}  toggleSidebar={toggleSidebar} />

     <div className='flex mt-12'>
       <SideBar isSidebarOpen={isSidebarOpen} />
       <div className='w-full bg-violet-50/50'>{children}</div>
     </div>
   </div>
 );
}

<SideBar/> is basically a list of Links rendered by <SingleLink/> components

export default function SideBar(props: Props) {
 const { isSidebarOpen } = props;
 return (
   <aside
     className={`
       ${
         isSidebarOpen ? 'w-64' : 'w-16'
       } px-4 pt-4 overflow-hidden min-h-[calc(100vh_-_48px)] bg-white transition-all duration-500`}
   >
     <nav>
       <ul
         className={`flex flex-col gap-y-4 items-start ${
           isSidebarOpen ? '' : 'ite'
         }`}
       >
         <SingleLink
           name='Dashboard'
           href='/dashboard'
           Icon={RiDashboard3Line}
           isSidebarOpen={isSidebarOpen}
         />

         <SingleLink
           name='EmailTemplates'
           href='/email-templates'
           Icon={LuMail}
           isSidebarOpen={isSidebarOpen}
         />

         <MultiLink
           name='User Mangement'
           parentHref='/user-management'
           Icon={LuUsers}
           isSidebarOpen={isSidebarOpen}
           subLinks={[
             { name: 'Manage Users', href: '/manage' },
             { name: 'User roles', href: '/roles' },
             { name: 'User Permission', href: '/permission' },
           ]}
         />

         <SingleLink
           name='Audit Log'
           href='/audit-log'
           Icon={LuFileSearch2}
           isSidebarOpen={isSidebarOpen}
         />
       </ul>
     </nav>
   </aside>
 );
}

as you can see i'm passing /email-templates to SingleLink component but its not getting active when i go to that route. if i change the userRoute(href) into useRoute("/") like you said its highlighting multiple links like /dashboard , /email-template and /audit-log. what i'm doing wrong here?

thank you so much for your time

export default function SingleLink(props: Props) {
 const { name, href, Icon, isSidebarOpen } = props;
 // const params = useParams();
 const [isActive] = useRoute(href);
 console.log(href, isActive);

 return (
   <Link
     href={`~${href}`}
     className={`${
       isActive ? 'text-violet-400' : 'text-slate-600'
     } block py-1 text-sm text-slate-600 hover:text-violet-400`}
   >
     <li
       className={`flex w-full
          ${isSidebarOpen ? 'gap-x-2' : ''}
          `}
     >
       <Icon className='text-2xl' />
       <span
         className={` overflow-hidden transition-all text-nowrap ${
           isSidebarOpen ? '' : 'w-0'
         }`}
       >
         {name}
       </span>
     </li>
   </Link>
 );
}

[nivethan-me]

@molefrog can you have a look on my previous comment when you have time please. and if there is any example for a sidebar with Wouter v3 would be really helpful