javascript - 在 NextJs 中更改动态页面的显示

Question

目前我正在使用 NextJs 作为我的前端。我有一个带有 URL http://localhost:3000/Places/[id] 的动态页面，其中 [id] 从我的 CMS 获取 id 号并返回其各自的数据。我的所有页面都有一个通用导航栏组件，但仅针对此页面，我想更改导航栏的样式。为了实现这一点，我使用 useState 和 useEffect 来检查 URL 并相应地更改样式：

代码：

const [isplace, setIsPlace] = useState(false);
  useEffect(function onFirstMount() {
      const url= window.location.href;

  if(url == "https://localhost:3000/Places"){
    setIsPlace(true)
  }else{
    setIsPlace(false)
  }
    

  }, []);
  return (
    <div className="fullNav" style={{opacity:isplace?"0.5":"1"}}> 

这段代码适用于非动态且具有硬 URL 值（如 http://localhost:3000/home）的页面。那么如何只更改动态页面的样式呢？

标签： javascriptreactjsnext.js