Целевая активная ссылка, когда маршрут активен в Next.js - PullRequest
Новая
       19

Целевая активная ссылка, когда маршрут активен в Next.js

0 голосов
/ 12 ноября 2018

Как нацелить активную ссылку в Next.js так, как мы это делаем в React-Router-4? То есть, дать активную ссылку классу, когда ее маршрут активен?

Ответы [ 2 ]

0 голосов
/ 26 декабря 2018

Еще одна минимальная версия, которая поддерживает as prop: 

import Link from "next/link";
import {withRouter} from "next/router";
import {Children} from "react";
import React from "react";

export default withRouter(({router, children, as, href, ...rest}) => (
   <Link {...rest} href={href} as={as}>
      {React.cloneElement(Children.only(children), {
         className: (router.asPath === href || router.asPath === as) ? `active` : null
      })}
   </Link>
));
0 голосов
/ 12 ноября 2018

Во-первых, вам нужно иметь компонент с именем Link с временным атрибутом activeClassName 

import { withRouter } from 'next/router'
import Link from 'next/link'
import React, { Children } from 'react'

const ActiveLink = ({ router, children, ...props }) => {
  const child = Children.only(children)

  let className = child.props.className || null
  if (router.pathname === props.href && props.activeClassName) {
    className = `${className !== null ? className : ''} ${props.activeClassName}`.trim()
  }

  delete props.activeClassName

  return <Link {...props}>{React.cloneElement(child, { className })}</Link>
}

export default withRouter(ActiveLink)

Затем используйте панель навигации с созданным компонентом Link и селектором css :active, чтобы различать активную и неактивную ссылку. 

import Link from './Link'

export default () => (
  <nav>
    <style jsx>{`
      .active:after {
        content: ' (current page)';
      }
      .nav-link {
        text-decoration: none;
        padding: 10px;
        display: block;
      }
    `}</style>

    <ul>
      <li>
        <Link activeClassName='active' href='/'>
          <a className='nav-link home-link'>Home</a>
        </Link>
      </li>
      <li>
        <Link activeClassName='active' href='/about'>
          <a className='nav-link'>About</a>
        </Link>
      </li>
    </ul>
  </nav>
)

После этого вы можете реализовать панель навигации на своей странице: 

import Nav from '../components/Nav'

export default () => (
  <div>
    <Nav />
    <p>Hello, I'm the home page</p>
  </div>
)

Ключ к тому, как эта работа находится внутри компонента Link, мы сравниваем значение router.pathname с атрибутом href из Link, если значение совпадает с другим, тогда помещаем конкретное className, чтобы ссылка выглядела активированной.

Ссылка: здесь

...