web-dev-qa-db-ja.com

Next.jsでルートがアクティブなときにアクティブリンクをターゲットにする

React-Router-4で行うように、Next.jsでアクティブなリンクをターゲットにする方法は？つまり、ルートがアクティブなときにアクティブリンクにクラスを与えますか？

reactjsreact-routernext.js
6
Ruby

最初に、一時属性activeClassNameを持つLinkというコンポーネントが必要です。

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)

次に、作成されたコンポーネントリンクと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内にあり、値が他と一致する場合、リンクの外観を作るために特定のclassNameを入れて、リンクの属性hrefとrouter.pathnameの値を比較します起動しました。

参照： ここ

6
Darryl R. Norbert

as propをサポートするもう1つの最小バージョン：

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>
));
8
Saman Mohamadi