[v6] [Feature]: Allow to access current route match with hooks

[goffioul]

What is the new or updated feature that you are suggesting?

AFAIK, it is not possible at the moment for a component rendered in a route to determine whether that route matches exactly or not. The hook useParams only gives you access to the URL parameters, and useMatch forces you to provide full URL pattern, which breaks component isolation.

Why should this feature be included?

I'm facing a situation where a component rendered within a route needs to know whether it's a leaf (end) or not. In v5, I could use useRouteMatch and get access to isExact. Concept code would be as follows:

function Parent() {
    // FIXME: how to know whether the current match is exact?
    const isExact = true;

    return (
        <div className={isExact ? "has-children" : "">
            <Outlet />
        </div>
    )
}

function Child() {
    ....
}

function App() {
    return (
        <Routes>
            <Route path="/my/url/path" element={<Parent />}>
                <Route path=":id" element={<Child />} />
            </Route>
        </Routes>
    );
}

[timdorr]

Just check if useOutlet is null or not. That will let you know if there's a child element under the Parent component.

[goffioul]

Ok, that was just an example. The point is to know whether the closest route matches exactly or not. For instance, in the following useOutlet would always be null AFAIK:

function Parent() {
    const isExact = ...

    return (
        <Fragment>
            <div className={isExact ? "has-children" : "">...</div>
            <Routes>
                <Route path=":id" element={<Child />} />
            </Routes>
        </div>
    )
}

function Child() {
    ....
}

function App() {
    return (
        <Routes>
            <Route path="/my/url/path/*" element={<Parent />} />
        </Routes>
    );
}

[goffioul]

Well, this is irritating. The API changed again in 6.1.x. Now useOutlet will never returns null...

[mcansh]

Well, this is irritating. The API changed again in 6.1.x. Now useOutlet will never returns null...

sorry! fixed in #8483, included some extra tests to make sure we do return null