1

Currently I'm using NextJs as my frontend. I have a dynamic page with the URL http://localhost:3000/Places/[id] where [id] takes the id number from my CMS and returns its respective data. I have a common navbar component for all my pages, but just for this page I want to change the styling of the navbar. To achieve this I'm using useState and useEffect to check the URL and change style accordingly:

Code:

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"}}>

This piece of code works for pages that are not dynamic and have a hard URL value like http://localhost:3000/home. So how do I only change my styling for the dynamic pages?

JJM50
  • 467
  • 1
  • 7
  • 20
  • Your solution should work have you tried using url.includes("https://localhost:3000/Places/")?. In any case I would consider creating a different template for that page as a solution also and if you notice any delay in setting the styling that's not good – Vincenzo Sep 05 '21 at 17:36
  • Yes tried using url.includes but didn't work – JJM50 Sep 05 '21 at 17:43
  • 1
    Does this help answer your question: [Get URL pathname in nextjs](https://stackoverflow.com/a/65701248/1870780)? You can use the `asPath` field from [`next/router`](https://nextjs.org/docs/api-reference/next/router#router-object). – juliomalves Sep 05 '21 at 19:47

0 Answers0