如何解决React.js中Navbar与Alert组件渲染重叠问题

问题场景 #

使用React.js开发Web应用前端，已完成导航栏（Navbar）组件、用户输入错误密码时触发的提示（Alert）组件开发，渲染时两个组件出现重叠。
组件重叠效果

关联代码 #

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;

问题原因 #

项目使用的DevConnector默认样式中，.navbar类设置了position: fixed固定定位，固定定位的元素会脱离常规文档流，不占据页面排版空间，后续渲染的Alert组件默认从页面顶部开始布局，直接和固定在顶部的导航栏重叠。

修复方法 #

任选一种方案即可解决重叠问题：

• 行内样式修复：直接给Alert渲染的div添加顶部外边距，数值和导航栏高度匹配即可，DevConnector默认导航栏高度为64px：

<div 
  key={alert.id} 
  className={`alert alert-${alert.alertType}`}
  style={{ marginTop: '64px' }}
>
  {alert.msg}
</div>

• 全局样式修复：打开App.css添加全局样式，统一给提示组件加顶部间距：

.alert {
  margin-top: 64px;
}

额外代码问题修正 #

Navbar.js中Login路由的Link组件写法错误，多写了一个无效的to属性，修正为：

<li>
  <Link to='/login'>
    Login
  </Link>
</li>

内容的提问来源于stack exchange，提问作者Camille