如何解决React中的组件重叠

Question

我正在尝试使用React.js编写web应用程序的前端。我完成了一个导航栏组件& &;当用户输入错误密码时的警报组件。当我渲染这两个组件时，我发现它们重叠我不知道是否出了什么问题😭.

这里是图片和代码。谢谢你的帮助。 重叠的组件

App.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;

Alert.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;

Answer 1

似乎你的nav标签有固定的位置。你应该从顶部(导航的高度)给标签填充，包装你的页面。如果它不能工作，你能提供一些css相关的导航或使用什么css库。

p。对不起，我的英语不好。

Answer 2

请尝试在导航栏组件中用div标签替换nav标签