React Router/Semantic UI React组件渲染异常求助

项目采用Recoil做状态管理、Semantic UI React实现样式、React Router DOM v6处理路由。目前NavBar能正常渲染在页面顶部，但CourseDashboard、LoginPage等路由组件要么无法显示，要么实际已渲染却被NavBar遮挡；当LoginPage改用原生HTML元素时则能正常显示。

相关代码 #

App.js #

import { useRecoilValue } from 'recoil';
import { authState } from './atoms/authAtom';
import { ToastContainer } from 'react-toastify';
import { ProtectedRoute } from './layout/ProtectedRoute';
import CourseDashboard from './features/course/CourseDashboard';
import { Route, Routes } from 'react-router-dom';
import NavBar from './features/nav/Navbar';
import { LoginPage } from './features/auth/LoginPage';

export const App = () => {
  const authentication = useRecoilValue(authState)

  return (
    <>
      <ToastContainer position='bottom-right' hideProgressBar />
      <NavBar />
      <Routes>
        <Route path='/courses' element={
          <ProtectedRoute user={authentication?.user} isAuthenticated={authentication?.isAuthenticated} redirectPath={'/login'}>
            <CourseDashboard />
          </ProtectedRoute>
        } />

        <Route path='/' element={
          <ProtectedRoute user={authentication?.user} isAuthenticated={authentication?.isAuthenticated} redirectPath={'/login'}>
            <CourseDashboard />
          </ProtectedRoute>
        } />

        <Route path='/login' element={<LoginPage />} />
      </Routes>
    </>
  )
}

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';
import { RecoilRoot } from 'recoil';
import { BrowserRouter } from 'react-router-dom';
import 'semantic-ui-css/semantic.min.css'
import './styles.css'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </RecoilRoot>
  </React.StrictMode>
);

LoginPage组件 #

import { Container, Form, Input, Text } from "semantic-ui-react";

export const LoginPage = () => {
  return (
    <>
      <Form>
        <Input name="email" type="email" placeholder="Enter Email" />
        <Input name="password" placeholder="Enter Password" type="password" />
      </Form>
    </>
  );
};

NavBar组件 #

import React from "react";
import { Menu, Container } from "semantic-ui-react";
import { useRecoilValue } from "recoil";
import { authState } from "../../atoms/authAtom";
import { NavLink } from "react-router-dom";
import { SignedInMenu } from "./SignedInMenu";

export default function NavBar() {
  const authentication = useRecoilValue(authState);
  console.log(authentication);

  return (
    <Menu inverted fixed="top">
      <Container>
        <Menu.Item as={NavLink} exact to="/" header>
          <img
            src="/assets/logo.jpg"
            alt="logo"
            style={{ marginRight: "15px" }}
          />
          Bhaktivedanta Vedic Academy
        </Menu.Item>

        <Menu.Item name="Courses" as={NavLink} to="/courses" />

        {authentication?.isAuthenticated && <SignedInMenu />}
      </Container>
    </Menu>
  );
}

问题原因与解决方案 #

核心原因 #

NavBar使用了Semantic UI的fixed="top"属性，该属性会让导航栏脱离文档流固定在页面顶部，导致后续路由组件的内容被遮挡。而LoginPage用原生HTML元素时，元素默认占据文档流空间，因此能正常显示。

具体解决步骤 #

1. 添加全局顶部间距
   在styles.css中添加以下代码，给页面主体内容设置顶部padding，值匹配导航栏的高度（Semantic UI固定顶部菜单默认高度约为56px，可根据实际调整）：

body {
  padding-top: 56px;
}

2. 优化LoginPage布局
   给LoginPage的表单添加容器和间距，让内容居中且布局合理：

import { Container, Form, Input } from "semantic-ui-react";

export const LoginPage = () => {
  return (
    <Container style={{ marginTop: '2rem' }}>
      <Form>
        <Form.Field>
          <Input name="email" type="email" placeholder="Enter Email" />
        </Form.Field>
        <Form.Field>
          <Input name="password" placeholder="Enter Password" type="password" />
        </Form.Field>
      </Form>
    </Container>
  );
};

3. 验证ProtectedRoute逻辑（可选）
   如果CourseDashboard仍无法显示，检查ProtectedRoute的实现是否正确，确保未认证时重定向、认证时正常渲染子组件。参考实现：

import { Navigate } from 'react-router-dom';

export const ProtectedRoute = ({ user, isAuthenticated, redirectPath, children }) => {
  if (!isAuthenticated || !user) {
    return <Navigate to={redirectPath} replace />;
  }
  return children;
};

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