[解決済み】コンポーネントの定義に表示名がない react/display-name

質問

表示名を付けるにはどうしたらいいですか？

export default () =>
  <Switch>
    <Route path="/login" exact component={LoginApp}/>
    <Route path="/faq" exact component={FAQ}/>
    <Route component={NotFound} />
  </Switch>;

解決方法は？

矢印関数を直接エクスポートしても、コンポーネントに displayName しかし、通常の関数をエクスポートした場合、関数名は displayName .

export default function MyComponent() {
  return (
    <Switch>
      <Route path="/login" exact component={LoginApp}/>
      <Route path="/faq" exact component={FAQ}/>
      <Route component={NotFound} />
    </Switch>
  );
}

また、関数を変数に入れ、その変数に displayName を手動で追加し、それをエクスポートします。

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;