[Bug]: Component does not load for JSX-returning arrow functions

[Nefcanto]

What version of React Router are you using?

6.26.2

Steps to Reproduce

Create a component that directly returns JSX and does not have a body:

import { List } from "CustomLibrary"

const CustomersList = () => <List entityType="Customer" />

export default CustomerList

Now create another component like this. Then build a routing with two links to switch between them.
When you change the URL/route using the navigation, the components won't load.

Now, change the components and add body to them.

const CustomerList = () => {
    return <List entityType="Customer" />
}

Now components are loaded when route changes.

Expected Behavior

Since many components exist that might not need a body at all, the Read Router DOM should load them too.

Actual Behavior

React Router DOM does not load components that do not have a body and return JSX directly.

[timdorr]

This isn't caused by the library. Something else is going on with your build system.

There is no way for us to tell the difference between those two functions, nor do we really care about what form your components are coded in. We just care that they're valid components and render them all the same way.