Использование роутера для обнаружения активной ссылки в Next.js

Как использовать маршрутизатор Next.js для обнаружения активной ссылки и присвоения ей класса, чтобы мы могли стилизовать ее с помощью CSS

Одна очень важная функция при работе со ссылками - это определение текущего URL-адреса и, в частности, присвоение класса активной ссылке, чтобы мы могли стилизовать ее иначе, чем другие.

Это особенно полезно, например, в заголовке вашего сайта.

Next.js по умолчаниюLinkкомпонент, предлагаемый вnext/linkне делает это автоматически за нас.

Мы можем сами создать компонент Link и сохранить его в файле.Link.jsв папке "Компоненты" и импортируйте это вместо значения по умолчанию.next/link.

В этом компоненте мы сначала импортируем React изreact, Ссылка сnext/linkиuseRouterкрючок изnext/router.

Внутри компонента мы определяем, соответствует ли текущее имя путиhrefprop компонента, и если да, мы добавляемselectedкласс детям.

Наконец, мы возвращаем этих потомков с обновленным классом, используяReact.cloneElement():

import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'

export default ({ href, children }) => { const router = useRouter()

let className = children.props.className || ‘’ if (router.pathname === href) { className = </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">className</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> selected }

return <Link href={href}>{React.cloneElement(children, { className })}</Link> }

Скачать мою бесплатнуюСправочник Next.js


Больше следующих руководств: