Digamos que tengo una barra de navegación con algunos botones (Inicio, Productos, Trabajos, etc.). Todos esos, pero, por ejemplo, el botón de cierre de sesión, sirven con un solo propósito: navegar por un usuario. El botón de cierre de sesión, además de este propósito común, también tiene que enviar una consulta al backend para limpiar las cookies del usuario, por ejemplo. Además, en caso de que la aplicación se expanda, debemos crear una serie de botones y asignarlos al componente. Así que se parece a esto:

 const coolButtons = [{path: '/Profile', title: 'Profile'}, {path: '/', title: 'Sign out'...}] const testComponent = () => { return ( <div> {coolButtons.map((button) => ( <Button data-path={button.path}>{button.title}</Button> ))} </div> ); };

Y luego, aquí en el componente, también quiero escribir un controlador para todos estos botones.

 const handleClick = (e: React.MouseEvent<HTMLElement>) =>{ if(path) navigate(e.currentTarget.dataset.path)// navigate from useNavigate(). }

Pero, ¿cómo podría manejar también la lógica de cierre de sesión? Obviamente, el primer pensamiento que viene a la mente es solo agregar un condicional y verificar si la ruta === cerrar sesión y, de ser así, hacer su parte de la lógica:

 const handleClick = async (e) => { const { path } = e.currentTarget.dataset; if (path) { if (path === '/signout') { await logout(); // for example navigate(path); } navigate(path); } };

¿Pero esta solución no parece bastante defectuosa? ¿Qué más podría hacer aquí? ¿Qué pasa si tenemos 2-3 botones con una lógica poco común? Gracias.