0

In my Next appliation, I would like to use a layout component with a navbar. I would like this navbar to highlight the currently active / shown page.

I am aware of the fact that I could create several navbars (one for each highlighted nav item) and that I could select the corresponding layout with "getLayout" in the code of my respective page.

However, this seems to be not very elegant since I would have a lot of redundant code.

Is there a best practice approach to "communicate" between my page and my layout component to "tell" my layout component which page is currently active? In a traditional React component I would allow my "child" component to communicate with its "parent" through a dedicated function that I would pass from the "parent" to their "child". This dedicated function (e.g., setNavItem(...)) would allow me to tell the "parent" which nav item to highlight. Is there a similar approach that I could use with Next?

bassman21
  • 320
  • 2
  • 11
  • 1
    No need for communication between components, the layout can simply use the `next/router`. You can use it to get the current page and highlight the active link accordingly right? Have you tried this approach – Tushar Shahi Sep 25 '22 at 09:33
  • Does this answer your question: [Target Active Link when the route is active in Next.js](https://stackoverflow.com/questions/53262263/target-active-link-when-the-route-is-active-in-next-js)? – juliomalves Oct 01 '22 at 14:54

0 Answers0