[Bug]: useOutlet() does not return null anymore

[goffioul]

What version of React Router are you using?

6.1.1

Steps to Reproduce

This is a follow-up of #8416. With 6.1.x, useOutlet() does not return null anymore, even when the nested route does not render. The OutletContext.Provider component is always rendered.

function Parent() {
    const outlet = useOutlet();

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

function Child() {
    ....
}

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

Expected Behavior

useOutlet() returns null when the nested route does not render.

Actual Behavior

useOutlet() returns OutletContext.Provider element.

[superfaz]

Same issue.

The code for useOutlet() is:

export function useOutlet(context?: unknown): React.ReactElement | null {
  let outlet = React.useContext(RouteContext).outlet;
  return (
    <OutletContext.Provider value={context}>{outlet}</OutletContext.Provider>
  );
}

source:

react-router/packages/react-router/index.tsx

Line 580 in 997b4d6

export function useOutlet(context?: unknown): React.ReactElement | null {

I imagine that a test on the outlet value (being null or not) is missing.

The previous code (changed 4 days ago):

export function useOutlet(): React.ReactElement | null {
  return React.useContext(RouteContext).outlet;
}

Current workaround

Tests with outlet.props.children instead of outlet