Estoy usando hook router 1.2.5 y tengo una página de inicio muy simple como se muestra a continuación:

 import { useRoutes } from "hookrouter"; import React from "react"; import Nav from "./pages/Nav"; import AboutPage from "./pages/About"; const HomePage = () => { const routeResult = useRoutes({ "/about": () => <AboutPage /> }); return ( <div fluid> <div xs={3} md={1} lg={1} className="nav-container"> <Nav /> </div> <div xs={9} md={11} lg={11}> {routeResult || <AboutPage />} </div> </div> ); }; export default HomePage;

Pero cuando ejecuto lint, veo que aparecen las siguientes advertencias.

 8:10 warning Component definition is missing display name react/display-name 8:10 warning Declare only one React component per file react/no-multi-comp

Sé que puedo desactivar estas advertencias de eslint. Pero me gustaría saber cómo solucionarlos. Por ejemplo, no tengo otro componente en mi archivo. Entonces, ¿por qué mostraría una advertencia react/no-multi-comp , o me perdí algo? Cualquier ayuda es apreciada.

ACTUALIZAR

Pude arreglar react/display-name reemplazando la función de flecha como se muestra a continuación:

 const routeResult = useRoutes({ "/about"() { return <AboutPage />; } });