Add a displayName to an anonymous component in Route

[scottwillmoore]

Problem

A common pattern is...

export const Route = createFileRoute("/hi/")({
    component: () => "Hi!",
});

However, in the React developer tools the component is labelled Anonymous. You can address this and lift the component out of the route.

const Hi: FunctionComponent = () => "Hi!";

export const Route = createFileRoute("/hi/")({
    component: Hi,
});

However, now you do not have access to Route and cannot use the hooks such as Route.useParams().

You can use a hoisted function instead, but I prefer to use arrow functions. You also cannot use the FunctionComponent type with a non-arrow functions.

export const Route = createFileRoute("/hi/")({
    component: Hi,
});

function Hi() {
    return "Hi!";
}

Solution

In createRoute add a displayName to the component if it does not already have a name or displayName. The displayName could just be the route path, for example /hi/ in this case.