How do I add a display name to this?
export default () =>
<Switch>
<Route path="/login" exact component={LoginApp}/>
<Route path="/faq" exact component={FAQ}/>
<Route component={NotFound} />
</Switch>;
Exporting an arrow function directly doesn't give the component a displayName
, but if you export a regular function the function name will be used as displayName
.
export default function MyComponent() {
return (
<Switch>
<Route path="/login" exact component={LoginApp}/>
<Route path="/faq" exact component={FAQ}/>
<Route component={NotFound} />
</Switch>
);
}
You can also put the function in a variable, set the displayName
on the function manually, and then export it.
const MyComponent = () => (
<Switch>
<Route path="/login" exact component={LoginApp}/>
<Route path="/faq" exact component={FAQ}/>
<Route component={NotFound} />
</Switch>
);
MyComponent.displayName = 'MyComponent';
export default MyComponent;