React ignoring Path causing wrong menu to show

Question

I have a menu with white links for dark backgrounds (used on homepage) and menu with dark links used on every other page.

For whatever reason on production, react/NextJS just ignore this on first page load even though when I console the path is "/". Any suggestions to fix this? If I got to about and click the homepage link the console path is still "/" can I get the correct menu.

export default function Navigation({menu, className}) {
  const {asPath} = useRouter()

  const router = useRouter()
  const path = router?.asPath // URL from router.
  console.log('path', path)
  if (path === '/') {
    return (
      <>
        {!!menu?.length && (
          <nav className={cn(styles.navigation, className)}>
            <ul className="home">
              {menu.map((item, index) => {
                const children =
                  item.children && item.children.length > 0 ? item.children : ''

                return (
                  <li key={index}>
                    <Link href={item.path}>
                      <a
                        target={item.target ? item.target : '_self'}
                        className={cn(
                          'nav-item',
                          isLinkActive(asPath, item.path) && styles.active
                        )}
                      >
                        {item.label}
                      </a>
                    </Link>
                    {children && (
                      <ul>
                        {children.map((item, index) => {
                          return (
                            <li key={index}>
                              <Link href={item.path}>
                                <a
                                  target={item.target ? item.target : '_self'}
                                  className={cn(
                                    'nav-item',
                                    isLinkActive(asPath, item.path) &&
                                      styles.active
                                  )}
                                >
                                  {item.label}
                                </a>
                              </Link>
                            </li>
                          )
                        })}
                      </ul>
                    )}
                  </li>
                )
              })}
            </ul>
          </nav>
        )}
      </>
    )
  }

  return (
    <>
      {!!menu?.length && (
        <nav className={cn(styles.navigationOther, className)}>
          <ul>
            {menu.map((item, index) => {
              const children =
                item.children && item.children.length > 0 ? item.children : ''

              return (
                <li key={index}>
                  <Link href={item.path}>
                    <a
                      target={item.target ? item.target : '_self'}
                      className={cn(
                        'nav-item',
                        isLinkActive(asPath, item.path) && styles.active
                      )}
                    >
                      {item.label}
                    </a>
                  </Link>
                  {children && (
                    <ul>
                      {children.map((item, index) => {
                        return (
                          <li key={index}>
                            <Link href={item.path}>
                              <a
                                target={item.target ? item.target : '_self'}
                                className={cn(
                                  'nav-item',
                                  isLinkActive(asPath, item.path) &&
                                    styles.active
                                )}
                              >
                                {item.label}
                              </a>
                            </Link>
                          </li>
                        )
                      })}
                    </ul>
                  )}
                </li>
              )
            })}
          </ul>
        </nav>
      )}
    </>
  )
}

Navigation.propTypes = {
  className: PropTypes.string,
  menu: PropTypes.arrayOf(PropTypes.object)
}

Answer 1

You need to use location from react-router-dom then set specific css classes for your menu and use it accordingly:

import { useLocation } from 'react-router-dom'

... then in your navigation bar use:

className={location.pathName === '/' ? bright-class-name : dark-class-name}