Why is the useRouter NextJS page reloading?

Question

JavaScript

I started making breadcrumbs, everything works, but when you click on any link, the page reloads. What is the reason?

The code:

'use strict';
import { routes } from '../../config'
import articles from '../../articles'
import {useRouter} from 'next/router'
import Link from 'next/link'

export default props => {

    const { asPath } = useRouter()
    const routesArray = asPath.split('/')

    const breadcrumbs = Array.from(new Set(routesArray.map((item) => {
        let path = item === `` ? `/` : `/${item}`
        let part = Object.values(routes).find(item => item.href === path)

        if (!part) {
            const article = articles.find(art => art.id === +item)
            if (article) {
                const { id, title } = article
                return {
                    href: `/articles/[id]`,
                    as: `/articles/${id}`,
                    title
                }
            }
        } else return part

    })))

    return <div className="breadcrumbs"><ul>{
        breadcrumbs.map(({ title, href, as }, index, arr) => (index === arr.length -1)
            ? <li key={index}><span>{ title }</span></li>
            : <li key={index}>
                <Link href={href} as={as}>
                    <a>{ title }</a>
                </Link>
            </li>
        )
    }</ul></div>
}

Answer 1

iordania , yes it's legal, according to the documentation. The problem starts when:

return <div className="breadcrumbs"><ul>{
        breadcrumbs.map(({ title, href, as }, index, arr) => (index === arr.length -1)
            ? <li key={index}><span>{ title }</span></li>
            : <li key={index}>
                <Link href={href} as={as}>
                    <a>{ title }</a>
                </Link>
            </li>
        )
    }</ul></div>

I use title href or as. If you remove it from all the rules, the page simply changes the content. I can't understand why this is happening. I do not change the state of the router or some other parameters.
Thank you all, the issue has been resolved, probably you need to get into the NextJs code and see how everything works there.