Why are active routes for NavLink decided by URL instead of by route children?

[bubokko]

I was very disappointed when I found out the way that NavLink decides on active routes. For example when I have:

const router = createBrowserRouter([
    {
        {
            path: "/foo",
            Component: FooPage,
        },
        {
            path: "/foo/*",
            Component: BarPage,
        },
    },
]);

And then my BarPage includes a NavLink:

import { NavLink } from "react-router";

const BarPage = () => {
    return (
        <div>
            <NavLink
                to="/foo"
                className={({ isActive }) => isActive ? "foo" : ""}
            >
                Foo
            </NavLink>
        </div>
    );
};

export default BarPage;

The link to /foo is considered to be active. I think it would be better if the NavLink being active or not was decided by the hierarchy of the routes, not by the URL prefix. URLs prefixes can often be unrelated to one another and deciding that NavLink is active just because the URL starts with the same prefix causes a lot of problems.

[sergiodxa]

You can pass the end prop to tell it to stop at the end of the path it links to.

[bubokko]

@sergiodxa thanks, actually it helps, even though I think the name of the attribute - end - is somewhat confusing. I was afraid it's gonna match <NavLink to="/foo"> when I'm on /bar/foo, but luckily it does not. Better name would be exact or something like that.