2022-05-02

useRouterでリンクのパスで分岐させる

Next.js の環境です。 URLの情報を取得して判定する参考演算子でクラスを出しわけます。 CSSは基本的には条件分岐で出しわけることができます。 この例だとReactですがVueであったり他のフレームワーク及びライブラリでも文法が違うけれど可能で在ると思います。

1const Header: React.FC = () => {
2  const router = useRouter();

まずはメイン関数の下にconstし、ページのURLの判定を取得します。

1
<a className={router.asPath === "/room" || room ? "アクティブ時のCSS" : "非動作時のCSS"}>

この場合ではasPath(URL)が/roomの場合に左のCSSを返し、そうでない場合は右側のCSSを返却します。


リンクコンポーネントを改善し汎用的にするために以下のように作りました。

Reactive.tsx

1import { ReactNode } from 'react';
2import { useRouter } from 'next/router';
3import ActiveLink from 'components/Sys/ActiveLink';
4
5type RNode = {
6  children: ReactNode;
7  url: string;
8  state: boolean | null;
9  on: string;
10  off: string;
11  mount: string;
12};
13
14const Reactive: React.FC<RNode> = ({ children, url, state, on, off, mount }) => {
15  const router = useRouter();
16  return (
17    <ActiveLink href={url} activeClassName={mount}>
18      <a className={router.asPath === url || state ? on : off}>{children}</a>
19    </ActiveLink>
20  );
21};
22
23export default Reactive;

url = hrefのページルートを設定 state = ホバーをonMouseEnter onMouseLeaveで管理する時にuseStateの状態を使用 on = アクティブ時のクラスを設定 off = 非アクティブ時のクラスを設定 mount = onはホバーでも発火するためアクティブ時のpointer-events: noneを設定

Remy氏のActiveLinkコンポーネントとの違いとしては現在のルートに対し一つのクラスを設置するのに対し、このclassNameをifで出しわけするのは非アクティブとアクティブ二つのクラスを設定できることになります。

私のブログではワイド150%で透明にしておいたラインをアクティブで75%に伸縮するように作っています。

使い方は以下のように引数にurlやオンオフの状態を割り当てます。

1<Reactive
2    url={'/'}
3    state={home}
4    on={'ActiveCSS'}
5    off={'UnActiveCSS'}
6    mount={'Done'}
7>
8    Home
9</Reactive>

Reactiveという名前の命名は反応性という語源から選びました。 もしよかったらこのコンポーネント、及びCSSを使ってみてください。