Exportar una función de flecha directamente no le da al componente un displayName , pero si exporta una función normal, el nombre de la función se usará como displayName .

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

También puede poner la función en una variable, establecer el displayName en la función manualmente y luego exportarla.

 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;

tldr: cambie la función de flecha a una función con nombre

Se muestra un error de pelusa: Component definition is missing display name react/display-name .

Para resolver, puede nombrar su función (IOW, no use la función de flecha). En este ejemplo, estoy usando react-table y pasando un componente personalizado para representarlo en una celda.

No hay error:

 { Cell: function OrderItems({ row }) { return ( <a> View Items </a> ); }, }

Error:

 { Cell: ({ row }) => ( <a> View Items </a> ) }

Una forma de agregar la propiedad displayName a la función de componente anónimo sin crear una función con nombre es usar recompose :

 import { compose, setDisplayName } from 'recompose'; export default compose(setDisplayName('SomeComponent'))(props => ...);

O solo:

 export default Object.assign(props => ..., { displayName: 'SomeComponent' });