React作品集侧边栏全页面未显示问题排查与修复求助

算力阿峰

2026-8-24

我正在搭建个人作品集，但Sidebar组件在所有页面都无法正常显示，怀疑是CSS或代码逻辑问题，涉及Sidebar组件、App.js、Layout组件及对应的scss文件，希望能缩小问题范围并找到修复方法。

相关组件代码

Sidebar index.js

import './index.scss'
import LogoS from '../../assets/images/logo-s.png'
import LogoSubtitle from '../../assets/images/logo_sub.png'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
  faLinkedin,
  faGithub,
  faYoutube,
  faSkype,
} from '@fortawesome/free-brands-svg-icons'
import { faHome, faUser, faEnvelope, faSuitcase } from '@fortawesome/free-solid-svg-icons'
import { Link, NavLink } from 'react-router-dom'

const Sidebar = () => {
  return (
    <div className="nav-bar">
      <Link className="logo" to="/">
        <img src={LogoS} alt="Logo" />
        <img className="sub-logo" src={LogoSubtitle} alt="slobodan" />
      </Link>
      <nav>
        <NavLink exact="true" activeclassname="active" to="/">
          <FontAwesomeIcon icon={faHome} color="#4d4d4e" />
        </NavLink>
        <NavLink activeclassname="active" className="about-link" to="/about">
          <FontAwesomeIcon icon={faUser} color="#4d4d4e" />
        </NavLink>
        <NavLink activeclassname="active" className="portfolio-link" to="/portfolio">
          <FontAwesomeIcon icon={faSuitcase} color="#4d4d4e" />
        </NavLink>
        <NavLink
          activeclassname="active"
          className="contact-link"
          to="/contact"
        >
          <FontAwesomeIcon icon={faEnvelope} color="#4d4d4e" />
        </NavLink>
      </nav>
      <ul>
        <li>
          <a
            href="https://www.linkedin.com/in/slobodan-gaji%C4%87-006bb8b8/"
            target="_blank"
            rel="noreferrer"
          >
            <FontAwesomeIcon icon={faLinkedin} color="#4d4d4e" />
          </a>
        </li>
        <li>
          <a
            href="https://github.com/bobangajicsm"
            target="_blank"
            rel="noreferrer"
          >
            <FontAwesomeIcon icon={faGithub} color="#4d4d4e" />
          </a>
        </li>
        <li>
          <a
            href="https://www.youtube.com/channel/UCBu5ulO4d-d47lAVybpRTkw"
            rel="noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faYoutube} color="#4d4d4e" />
          </a>
        </li>
        <li>
          <a href="skype:live:bobangajicsm" rel="noreferrer" target="_blank">
            <FontAwesomeIcon icon={faSkype} color="#4d4d4e" />
          </a>
        </li>
      </ul>
    </div>
  )
}

export default Sidebar

Sidebar scss

.nav-bar {
  background: #181818;
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 3;
  min-height: 500px;

  .logo {
    display: block;
    padding: 8px 0;

    img {
      display: block;
      margin: 8px auto;
      width: 24px;
      height: auto;

      &.sub-logo {
        width: 50px;
      }
    }
  }

  nav {
    display: block;
    text-align: center;
    position: absolute;
    height: 210px;
    top: 50%;
    margin-top: -120px;
    width: 100%;

    a {
      font-size: 22px;
      color: #4d4d4e;
      display: block;
      line-height: 51px;
      height: 51px;
      position: relative;
      text-decoration: none;

      i {
        transition: all 0.3s ease-out;
      }

      &:hover {
        color: #ffd700;

        svg {
          opacity: 0;
        }

        &:after {
          opacity: 1;
        }
      }

      &:after {
        content: '';
        font-size: 9px;
        letter-spacing: 2px;
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        text-align: center;
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
      }

      &:first-child {
        &:after {
          content: 'HOME';
        }
      }
    }

    a.about-link {
      &:after {
        content: 'ABOUT';
      }
    }

    a.contact-link {
      &:after {
        content: 'CONTACT';
      }
    }

    a.portfolio-link {
      &:after {
        content: 'PORTFOLIO';
      }
    }

    a.active {
      svg {
        color: #ffd700;
      }
    }
  }

  ul {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: block;
    padding: 0;
    list-style: none;
    text-align: center;
    margin: 0;

    li {
      a {
        padding: 7px 0;
        display: block;
        font-size: 15px;
        line-height: 16px;
        color: #4d4d4e;

        &:hover {
          color: #ffd700;
        }
      }
    }
  }
}

App.js

import { Route, Routes } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
import Contact from './components/Contact'
import Layout from './components/Layout'
import Portfolio from './components/Portfolio'
import Dashboard from './components/Dashboard'
import './App.scss'

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/portfolio" element={<Portfolio />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Route>
      </Routes>
    </>
  )
}

export default App

Layout index.js

import { Outlet } from 'react-router-dom'
import Sidebar from '../Sidebar/'
import './index.scss'

const Layout = () => {
  return (
    <div className="App">
      <Sidebar />
      <div className="page">
        <span className="tags top-tags">&lt;body&gt;</span>

        <Outlet />
        <span className="tags bottom-tags">
          &lt;/body&gt;
          <br />
          <span className="bottom-tag-html">&lt;/html&gt;</span>
        </span>
      </div>
    </div>
  )
}

export default Layout

排查与修复步骤

1. 确认组件是否被正确渲染

打开浏览器开发者工具（F12），切换到Elements面板，搜索.nav-bar元素：
- 如果找不到该元素，说明Sidebar未被渲染：
  - 检查Layout组件的导入和使用：确认App.js中嵌套路由的父路由是Layout，且Layout组件内确实导入并渲染了Sidebar。可以在Layout组件中添加console.log('Layout rendered')，查看控制台是否有输出，验证Layout是否加载。
  - 检查Sidebar的导入路径：Layout中import Sidebar from '../Sidebar/'，确保Sidebar文件夹下存在index.js，路径层级正确。

2. 排查CSS样式问题

如果Elements面板中存在.nav-bar但视觉上不可见，优先检查样式：
- 父容器定位缺失：.nav-bar使用position: absolute，需要父容器.App设置position: relative，否则绝对定位会基于整个视口，可能被其他元素覆盖或位置异常。在Layout的index.scss中添加：
```
.App {
  position: relative;
  min-height: 100vh;
}
```
- 高度失效：.nav-bar设置height: 100%，若父容器没有明确高度，该属性不会生效。给.App添加min-height: 100vh确保占满视口高度。
- z-index被覆盖：临时将.nav-bar的z-index改为9999，测试是否被其他元素遮挡。
- 颜色对比问题：侧边栏背景色#181818与图标色#4d4d4e对比度低，若页面背景色相近会导致图标不可见。可临时将.nav-bar背景色改为红色，验证是否显示。

3. 修复代码细节问题

NavLink属性错误：activeclassname应为驼峰式activeClassName，否则激活样式不生效（虽不影响组件显示，但需修正）。
FontAwesome图标加载：检查控制台是否有图标资源加载错误（如404），可临时将图标替换为普通文字（如Home）测试是否显示。
图片路径问题：确认Logo图片路径正确，控制台若有图片404错误，需修正路径。

4. 最小化测试

简化Layout组件，仅渲染Sidebar：
```
const Layout = () => {
  return <Sidebar />
}
```
若此时Sidebar显示，再逐步添加.page、Outlet等元素，排查冲突点。

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

React作品集侧边栏全页面未显示问题排查与修复求助

相关组件代码 #

Sidebar index.js

Sidebar scss

App.js

Layout index.js

排查与修复步骤 #

1. 确认组件是否被正确渲染

2. 排查CSS样式问题

3. 修复代码细节问题

4. 最小化测试

相关组件代码

排查与修复步骤