Почему перезагружается страница useRouter NextJS?

Question

[Роман Андреевич]

Начал делать хлебные крошки, все работает, но при клике на любую ссылку страница перезагружается. В чем причина?

Код:

'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>
}

Comments

[Роман Андреевич]

BOG84wer7q9re8, читайте ниже, вопрос решен уже

Answer 1

[Роман Андреевич]

iordania, да это законно, согласно документации. Проблема начинается когда:

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>

я пользуюсь title href или as. Если из убрать то все норм, страница просто меняет контент. Не могу понять почему так происходит. Я же не меняю состояние роутера или еще каких то параметров.

Всем спасибо, вопрос решился, наверное нужно лезть в код NextJs и смотреть как там все работает.

Comments

[hzzzzl]

так как вопрос решился, просто не юзать этот компонент?
у меня вообще от next.js сложилось впечатление, что он хорош только на бумаге и в документации, делал на нем мини-проект и замаялся с этими всеми подводными камнями

причем даже если бы этот компонент работал, то наверняка useRouter() бы отрабатывал только "в браузере", то есть в server-side rendered коде там было бы пустое место ¯\_(ツ)_/¯

[Роман Андреевич]

hzzzzl, у меня аналогичное мнение, но вот что если нужно СЕО и нужно выдавать контент без перезагрузки. Принцип работы у аналогов такой же. Но в любом спасибо

Answer 2

[iordania]

<Link href={href} as={as}>
        <a>{ title }</a>
     </Link>

У вас ссылка внутри ссылки, это законно ?

Попробуйте так:

<Link href={href} as={as}>
        { title }
     </Link>