Next.jsで動的にCSSを切り替えたい
解決したいこと
Next.jsを用いて、webアプリケーションを作成しております。
そこで、URLに応じて動的にCSSを切り替えたいと思い、下記のようなコードを試しましたが、意図した挙動になりません。アドバイスをいただけると幸いです。
Next.js 13.1.2
React 18.2.0
試したコード
import React, { useEffect, useState } from "react";
type LayoutProps = {
children: React.ReactNode;
};
const Layout = ({ children }: LayoutProps) => {
const router = useRouter();
const pattern = new RegExp("^/path/[0-9]{1,}", "gi");
return (
<main
className={`${
pattern.test(router.asPath) ? "" : "ml-44"
} flex-grow`}
>
{children}
</main>
);
};
export default Layout;
意図している挙動
pattern.test(router.asPath)の値によって、ml-44の切り替えを行う。
エラー内容
new RegExp("^/path/[0-9]{1,}", "gi")の正規表現パターンにマッチしたURLへ遷移してもpattern.test(router.asPath)の値がfalseになってししまう。
0
