How to route isActive on multiple elements in NextJS

[viral harness]

Assuming this is the JSON

{
    url: "",
},
{
   url: "pages",
}.
{
  url: "settings"
}

And we get these urls:
http://localhost:3000/dashboard/sites/327
http://localhost:3000/dashboard/sites/327/pages
http://localhost:3000/dashboard/sites/327/settings/posts

How would you make it so what is after the 'id' will be set to active, so id/[active] if one of the url above matches

Bare in mind, the 'settings/posts the posts is a folder in nextjs.

[teal laurel]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[viral harness]

I got this but this is so bad:

import { dataSiteHeader } from "../../data-site-header";
import SiteHeaderNavigationItem from "./SiteHeaderNavigationItem";
import { useParams, usePathname } from "next/navigation";

function SiteHeaderNavigationList() {
  const { id } = useParams();
  const pathname = usePathname()

  return (
    <nav className="flex w-full h-full bg-[#0e0f10] gap-2">
      {dataSiteHeader && dataSiteHeader.map(item => {
        const isActive = pathname.split('/')[4] === item.url || item.url === "" && pathname.split('/')[4] === undefined
        return <SiteHeaderNavigationItem item={item} isActive={isActive} siteID={id} key={item.id} />
      })}
    </nav>
  )
}

export default SiteHeaderNavigationList;

[pulsar gazelle]

import { dataSiteHeader } from "../../data-site-header";
import SiteHeaderNavigationItem from "./SiteHeaderNavigationItem";
import { useParams, usePathname } from "next/navigation";

function SiteHeaderNavigationList() {
  const { id } = useParams();
  const pathname = usePathname();
  
  // Extract the relevant URL segment after 'id'
  const segmentAfterId = pathname.split('/')[4] || null;

  return (
    <nav className="flex w-full h-full bg-[#0e0f10] gap-2">
      {dataSiteHeader && dataSiteHeader.map(item => {
        // Check if the segment matches the item URL or if it's the root URL
        const isActive = segmentAfterId 
                         ? segmentAfterId === item.url 
                         : item.url === "";

        return (
          <SiteHeaderNavigationItem 
            item={item} 
            isActive={isActive} 
            siteID={id} 
            key={item.id} 
          />
        );
      })}
    </nav>
  );
}

export default SiteHeaderNavigationList;

I’d be careful when hardcoding the index like you’re doing. This approach is guaranteed to break if you ever change your URL structure.

Idk try this

import { dataSiteHeader } from "../../data-site-header";
import SiteHeaderNavigationItem from "./SiteHeaderNavigationItem";
import { useParams, usePathname } from "next/navigation";

function getSegmentAfterId(pathname, id) {
    const decodedPath = decodeURIComponent(pathname);
    const segments = decodedPath.split('/');
    const idPosition = segments.indexOf(String(id));
    
    // Return null if id is not found or is the last segment
    if (idPosition === -1 || idPosition === segments.length - 1) {
        return null;
    }

    return segments[idPosition + 1];
}

function SiteHeaderNavigationList() {
  const { id } = useParams();
  const pathname = usePathname();

  if (!dataSiteHeader || !Array.isArray(dataSiteHeader)) {
    return null;  // consider adding some fallback UI or error message
  }

  const segmentAfterId = getSegmentAfterId(pathname, id);

  return (
    <nav className="flex w-full h-full bg-[#0e0f10] gap-2">
      {dataSiteHeader.map(item => {
        const isActive = item.url === segmentAfterId || (!segmentAfterId && item.url === "");
        return (
          <SiteHeaderNavigationItem 
            item={item} 
            isActive={isActive} 
            siteID={id} 
            key={item.id} 
          />
        );
      })}
    </nav>
  );
}

export default SiteHeaderNavigationList;

[viral harness]

Thanks, going have to digest the decode url path not that familiar with it, but it works for 90% will check it once I'm a bit more awake, now bit sleepy 😄

Yeah and I agree with you, I though there was some native nextjs function or something.

Feels like some things are easier in react and some in nextjs, but I think overall nextjs seems better just need to learn the ropes and get faimilar with it