# Repeatable document links and useRouter for active classes

**URL:** https://community.prismic.io/t/repeatable-document-links-and-userouter-for-active-classes/4673
**Category:** Developing with Prismic
**Tags:** nextjs
**Created:** [March 25, 2021, 3:19am UTC](https://community.prismic.io/t/repeatable-document-links-and-userouter-for-active-classes/4673 "2021-03-25T03:19:16Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![mike1](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/mike1/32/1785_2.png) [@mike1](https://community.prismic.io/u/mike1)
#### Post date: [March 25, 2021, 3:19am UTC](https://community.prismic.io/t/repeatable-document-links-and-userouter-for-active-classes/4673/1 "2021-03-25T03:19:16Z")

</div>

My site uses a menu doctype to build a flexible menu. I'm trying to set up the links to have an active class when on their using `useRouter()` which works well for singleton docs linkss but for some reason the below code won't recognise/add the class to the doc links from repeatable types:

```auto
const DocLink = ({ children, link, linkClass }) => {
  if (link) {
    const linkUrl = Link.url(link, linkResolver)

    const router = useRouter()
    const style = {
      color: router.pathname === linkUrl ? 'red' : 'black',
    }

    const handleClick = (e) => {
      e.preventDefault()
      router.push(linkUrl)
    }

    // If the link is an internal link, then return a NextLink
    if (link.link_type && link.link_type === 'Document') {
      return (
        <NextLink
          as={linkUrl}
          href={Link.url(link, hrefResolver)}
        >
          <a onClick={handleClick} style={style} className={`lg:border-b-2 lg:border-transparent lg:transition-all lg:ease-in-out lg:duration-200 hover:border-black ${linkClass}`}>{children}</a>
        </NextLink>
      )
    }

    // Otherwise return a normal anchor element
    return (
      <a className={linkClass} href={linkUrl}>{children}</a>
    )
  }
  return null
}

export default DocLink

```

Any tips would be greatly appreciated.

---

<div class="post-metadata">

### Author: ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)
#### Post date: [March 29, 2021, 2:30pm UTC](https://community.prismic.io/t/repeatable-document-links-and-userouter-for-active-classes/4673/3 "2021-03-29T14:30:55Z")

</div>

Hello,

After looking down at your code, There are 2 resolvers you are using `hrefResolver` and `linkResolver`. Here, I believe you are already getting the required link by  
`const linkUrl = Link.url(link, linkResolver)`  
Can you try to use:  
`href={linkUrl}>` instead of `href={Link.url(link, hrefResolver)}` in `NextLink` in your code?

`linkResolver` is the one Prismic has recommended using and is well-defined for your code.

Let me know if I am correct in understanding.

Thanks,

Priyanka

---

<div class="post-metadata">

### Author: ![mike1](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/mike1/32/1785_2.png) [@mike1](https://community.prismic.io/u/mike1)
#### Post date: [March 29, 2021, 10:09pm UTC](https://community.prismic.io/t/repeatable-document-links-and-userouter-for-active-classes/4673/4 "2021-03-29T22:09:14Z")

</div>

Hi Priyanka,

Thanks for your response. That's not quite what I was after. I've used the solution [here](https://stackoverflow.com/questions/53262263/target-active-link-when-the-route-is-active-in-next-js) to get an active class.

Cheers,  
Mike

---

<div class="post-metadata">

### Author: ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)
#### Post date: [April 13, 2021, 11:48am UTC](https://community.prismic.io/t/repeatable-document-links-and-userouter-for-active-classes/4673/5 "2021-04-13T11:48:14Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

---

<div class="post-metadata">

### Author: ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)
#### Post date: [December 9, 2021, 4:24pm UTC](https://community.prismic.io/t/repeatable-document-links-and-userouter-for-active-classes/4673/6 "2021-12-09T16:24:24Z")

</div>