How to change the path when NavLink is active

Question

<NavLink
   className={({ isActive }) => (isActive ? "isActive" : "isNotActive")}
   to={"artist/" + currentMotive.artist.slug.current}
   key={currentMotive.artist.slug.current}>
   {currentMotive.artist.name}
</NavLink>

How can I change the attribute to in the same way as className? Like:

to={({ isActive }) =>
   isActive
      ? "/motive/" + currentMotive.slug.current
      : "artist/" + currentMotive.artist.slug.current
}

I use react router 6.8.

I tried to use useLocation to check the path and compare it, but isn't there an easier way?

Here is the code: https://codesandbox.io/s/toogle-navlink-p5plsq?file=/src/RootLayout.js

I want, that in the Nav, Artist 1 works like a toggle to open and close <Artist />

Answer 1

You can create a state in the layout to hold a reference to an active artist and attach an onClick handler to each link to set the active artist value. The to prop would conditionally render the appropriate link target.

Example:

const [activeLink, setActiveLink] = useState(null);

const handleLink = (id) => () => {
  setActiveLink((active) => (active === id ? null : id));
};

...

<NavLink
  key={currentMotive.artist.slug.current}
  className={({ isActive }) => isActive ? "isActive" : "isNotActive"}
  to={activeLink === currentMotive.artist.slug.current
    ? `/motive/${currentMotive.slug.current}`
    : `artist/${currentMotive.artist.slug.current}`
  }
  onClick={handleLink(currentMotive.artist.slug.current)}
>
   {currentMotive.artist.name}
</NavLink>

Example from sandbox:

import { useState } from "react";
import { NavLink, Outlet } from "react-router-dom";

export default function RootLayout() {
  const [activeLink, setActiveLink] = useState(null);

  const handleLink = (id) => () => {
    setActiveLink((active) => (active === id ? null : id));
  };

  return (
    <div className="Root">
      <ul>
        Nav:
        <li>
          <NavLink
            to={activeLink === "artist-1" ? "/" : "artist/artist-1"}
            onClick={handleLink("artist-1")}
          >
            Artist 1
          </NavLink>
        </li>
        <li>
          <NavLink
            to={activeLink === "artist-2" ? "/" : "artist/artist-2"}
            onClick={handleLink("artist-2")}
          >
            Artist 2
          </NavLink>
        </li>
        <li>
          <NavLink
            to={activeLink === "artist-3" ? "/" : "artist/artist-3"}
            onClick={handleLink("artist-3")}
          >
            Artist 3
          </NavLink>
        </li>
      </ul>

      <div>
        <Outlet />
      </div>
    </div>
  );
}