Estoy tratando de escribir el front-end de una aplicación web usando React.js. Y realizo un componente de barra de navegación y un componente de alerta cuando el usuario ingresa la contraseña incorrecta. Cuando rendericé estos dos componentes, encontré que se superponían y no sé si algo salió mal 😭.

Aquí están las imágenes y el código. Muchas gracias por tu ayuda.

Superposición de componentes

Aplicación.js

 import './App.css'; import React, { Fragment } from 'react'; import Navbar from './components/layout/Navbar'; import { Landing } from './components/layout/Landing'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { Login } from './components/auth/Login'; import Register from './components/auth/Register'; import Alert from './components/layout/Alert'; // Redux import { Provider } from 'react-redux'; import store from './store'; const App = () => ( <Provider store={store}> <Router> <Navbar /> <Alert /> <Routes> <Route path='/' element={<Landing />} /> <Route path='/register' element={<Register />}></Route> <Route path='/login' element={<Login />}></Route> </Routes> </Router> </Provider> ); export default App;

alerta.js

 import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; const Alert = ({ alerts }) => alerts !== null && alerts.length > 0 && alerts.map((alert) => ( <div key={alert.id} className={`alert alert-${alert.alertType}`}> {alert.msg} </div> )); Alert.propTypes = { alerts: PropTypes.array.isRequired, }; const mapStateToProps = (state) => ({ alerts: state.alert, }); export default connect(mapStateToProps)(Alert);

Navbar.js

 import React from 'react'; import { Link } from 'react-router-dom'; const Navbar = () => { return ( <nav className='navbar bg-dark'> <h1> <Link to='/'> <i className='fas fa-code'></i> DevConnector </Link> </h1> <ul> <li> <a href='profiles.html'>Developers</a> </li> <li> <Link to='/register'>Register</Link> </li> <li> <Link to href='/login'> Login </Link> </li> </ul> </nav> ); }; export default Navbar;