NavMenu shows wrong active link

[YevhenTarashchyk]

This search param '?modal=settings' opens modal which works right however settings link is often active in NavMenu when it shouldn't suppose to be

<div className='wrapper wrapper--default'>
          <NavMenu>
            <Link rel='home' url='/'>
              {i18n.translate('Dashboard')}
            </Link>
            <Link url='/promotion-list'> {i18n.translate('Promotions')}</Link>
            <Link url='/analytics'> {i18n.translate('Analytics')}</Link>
            <Link url='?modal=settings'>{i18n.translate('Settings')}</Link>
          </NavMenu>
          <Navbar />
          <Pages />
          {searchParams.get('modal') === 'settings' && <SettingsModal />}
        </div>

I want '{i18n.translate('Settings')}' to be active only if there is search param in url OR if it is not possible is there any way I could prevent 'Settings' from being active at all ?

[SealinGp]

I've got the similar question, the key of this question is let developer(us) can control the active of Navmenu's children, but from what i've read from doc, it can't be controlled. the question i met is that.

1. app/routes/app.tsx code is :

   
   export default function App() {
   return (
     <AppProvider isEmbeddedApp apiKey={apiKey} i18n={polarisEn}>
       <NavMenu>
         <Link to="/app" rel="home">Home</Link>
         <Link to="/app/admin">Admin</Link>
         <Link to="/app/admin-login">Login</Link>
       </NavMenu>
       <Outlet />
     </AppProvider>
   )
   }

2.   app/routes/app.admin.tsx code is:
```typescript
export const loader = async ({ request }: LoaderFunctionArgs) => {
// whether redirect function is from "@remix-run/node" or const { redirect } = await authenticate.admin(request), still the same.
   return redirect("/app/admin-login")
};

3. when i click "Admin", then redirect to "/app/admin-login", but the "Admin" menu still active instead of "Login", the active child of NavMenu doesn't change as the pathname changed.

4.screenshot:

hope official staff can give us a solution. relevant issues:

• 392

[ngbrown]

The same happens when I use a button with url within the app to navigate between sections. The NavMenu children don't update the active section. I also tried open(), but that causes an authentication error and the remix useNavigate, that also doesn't update the navigation.

[yadsgroup]

@SealinGp @ngbrown You might want to use NavLink instead of Link in order to have the correct active state

[haseebsoftwreng]

Hello Developers. I am also facing the issue.is their any find the best solution?