[Bug]: Route component does not allow returning undefined from component

[user72356]

What version of React Router are you using?

6.4.3

Steps to Reproduce

export default function MyPage()
{
    return undefined;
}

const router = createBrowserRouter(createRoutesFromElements(
    <>
        <Route path="/" element={ <MyPage /> } />
    </>
));

Expected Behavior

As of React 18, a component can return undefined instead of null. See official PR and write-up.

At the moment, the TS typings for the Route component in react-router do not accept passing an element that returns undefined, only null.

Actual Behavior

Type 'undefined' is not assignable to type 'Element | null'.ts(2786)

[timdorr]

As far as I can tell, that type definition isn't coming from us anywhere. I tested and was able to use a component that returned undefined just fine. My best guess is you're using the wrong version of @types/react.

[user72356]

As far as I can tell, that type definition isn't coming from us anywhere. I tested and was able to use a component that returned undefined just fine. My best guess is you're using the wrong version of @types/react.

@timdorr I hope you can see this reply. I think you were trigger-happy with the close button, not giving me a chance to reply and help you out.

Route is a react-router component and the type definition is most definitely from your package. This is from the components.d.ts file:

export declare function Route(_props: RouteProps): React.ReactElement | null;

export declare type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;

export interface PathRouteProps {
    caseSensitive?: NonIndexRouteObject["caseSensitive"];
    path?: NonIndexRouteObject["path"];
    id?: NonIndexRouteObject["id"];
    loader?: NonIndexRouteObject["loader"];
    action?: NonIndexRouteObject["action"];
    hasErrorBoundary?: NonIndexRouteObject["hasErrorBoundary"];
    shouldRevalidate?: NonIndexRouteObject["shouldRevalidate"];
    handle?: NonIndexRouteObject["handle"];
    index?: false;
    children?: React.ReactNode;
    element?: React.ReactNode | null; <<<<<<<<<<<<<<<<<<< HERE
    errorElement?: React.ReactNode | null;
}

[timdorr]

Yes, we accept a ReactNode or null, not Element or null. If you have React 18 compatible typedefs installed, this will work without error.

Again, I confirmed as such with an example similar to yours.

[user72356]

Everything is up to date. But I just found out it was a Typescript bug. DefinitelyTyped/DefinitelyTyped#18912

I'm curious how the repro example is working for you knowing about the above bug? Doesn't change anything in the end, just curious.