RomanDillerNsk
@RomanDillerNsk
JavaScript

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

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

Код:

'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>
}
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
RomanDillerNsk
@RomanDillerNsk Автор вопроса
JavaScript
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 и смотреть как там все работает.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@iordania
<Link href={href} as={as}>
        <a>{ title }</a>
     </Link>

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

Попробуйте так:
<Link href={href} as={as}>
        { title }
     </Link>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы