Какая библиотека в Next JS позволяет использовать NavLink, аналогичный компоненту NavLink из react-router-dom?

Существует ли библиотека для Next JS, которая позволяет использовать NavLink аналогично react-router-dom?
  • 2 августа 2024 г. 3:43
Ответы на вопрос 1
Для использования NavLink в Next JS можно воспользоваться библиотекой `next/link`, которая позволяет создавать ссылки на различные страницы в приложении.

Если вы хотите использовать NavLink аналогично react-router-dom, то можно создать свой собственный компонент NavLink, который будет использовать `next/link` для создания ссылок с активным состоянием. Например:

```jsx
import { useRouter } from 'next/router'
import Link from 'next/link'

const NavLink = ({ href, children }) => {
  const router = useRouter()
  const isActive = router.pathname === href

  return (
    <Link href={href}>
      <a className={isActive ? 'active' : ''}>
        {children}
      </a>
    </Link>
  )
}

export default NavLink
```

Затем можно использовать этот компонент NavLink в своем приложении, например:

```jsx
import NavLink from '../components/NavLink'

const Nav = () => {
  return (
    <nav>
      <NavLink href="/">Home</NavLink>
      <NavLink href="/about">About</NavLink>
      <NavLink href="/contact">Contact</NavLink>
    </nav>
  )
}

export default Nav
```

Таким образом, можно создать NavLink аналогичный react-router-dom, используя свой собственный компонент NavLink с помощью `next/link`.
Похожие вопросы