space tourism

Community feedback

• 

  Eduard Ionescu•510

  @EduardIonescuPosted almost 2 years ago

  Hi, your solution doesn't work because everytime you go to another page, it triggers a re-render, and since you have the navbar inside each page, it re-renders too. But you can try using useLocation to implement it in a simple way. I used something like:

  import { useLocation } from 'react-router-dom'
  import Link from "whatever";
  export default function Navbar(){
    const location= useLocation();
    return (<Link to="/destination" className=`${location.pathname == "/destination" && "link-active"}`>...</Link>) 
  }
  

  • Here location.pathname will return your route so basically if you're in the Destination page it will return '/destination' and if that is the case, then the condition will be true and return "active-link" as the className . Therefore if you are on the page that matches the respective link's address, the link will be the only one active so you don't have to worry about onClick events.
  • I honestly used useRouter from nextjs, but it should be the same as useLocation in react-router.

  Alternatively, you could probably keep it the way you did it if you create a layout with the navbar that doesn't change when the page changes, but am not sure about it.

  I hope this helped and good luck debugging it haha!

  Marked as helpful

  1

  ---

  

  NizarMjr•390

  @NizarMjrPosted almost 2 years ago

  @EduardIonescu Thank you for your feedback At all events i get the idea from you and im sure i will fix it as long as there are a lot of hooks i don't know about them like useLocation as you mentionned so i have a long journey and many bugs are waiting xD Thank you and Happy Coding ...

  1