React项目中Navbar添加Link组件后无法显示问题求助

问题现象 #

Navbar组件内仅放置图片时导航栏正常显示，使用react-router-dom的Link组件包裹图片后，导航栏直接消失。已检查navbar.scss未发现明显异常。

相关代码 #

Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';
import './navbar.scss';
import Logo from '../../image/Logo.png';
import Admin from '../../image/eye.png';

export default function Navbar() {
  return (
    <div className='navBar'>
      <div style={{width: "90%", display: "flex", alignItems: "center", justifyContent: "space-between"}}>
        <Link to="/">
          <img src={Logo} alt="Logo" className='Logo'/>
        </Link>
        <Link to="/admin">
          <img src={Admin} alt="Admin" className='Admin'/>
        </Link>
      </div>
    </div>
  );
}

navbar.scss

.navBar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: 10vh;
  }
  
  .Logo, .Admin {
    cursor: pointer;
    padding-top: 3vh;
    width: 5%;
  }

index.js（路由配置）

import React from 'react';
import ReactDOM from 'react-dom/client';
import{BrowserRouter,Routes,Route} from "react-router-dom";
import Home from './pages/Home/home.js';
import Err404 from './pages/Error/err404.js';
import CRUD from './pages/CRUD/crud.js'
import Navbar from './pages/Navbar/navbar.js';
import Footer from './pages/Footer/footer.js'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Navbar/>
    <Routes>
      <Route path='/' element={<Home/>}></Route>
      <Route path='/CRUD' element={<CRUD/>}></Route>
      <Route path='*' element={<Err404/>}></Route>
    </Routes>
    <Footer/>
  </BrowserRouter>
);

排查与解决 #

• 修正Link组件布局行为
  Link默认是inline元素，作为flex容器子元素时无法正确继承对齐规则，导致内部图片无法正常渲染。给Link添加flex属性即可：

.navBar a {
    display: flex;
    align-items: center;
}

也可以直接在JSX中给Link设置style：

<Link to="/" style={{display: 'flex', alignItems: 'center'}}>
  <img src={Logo} alt="Logo" className='Logo'/>
</Link>

• 调整图片内边距与容器布局
  .Logo和.Admin的padding-top: 3vh会让图片实际高度超出height:10vh的.navBar容器，加上fixed定位可能导致元素被挤出可视区域。可以修改为：

.navBar {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: fixed;
    width: 100%;
    padding-top: 3vh;
    height: 10vh;
    box-sizing: border-box;
}

.Logo, .Admin {
    cursor: pointer;
    width: 5%;
}

• 补充缺失的路由
  当前路由配置没有/admin对应页面，点击该Link会跳转到404页面，建议补充路由：

<Routes>
  <Route path='/' element={<Home/>}></Route>
  <Route path='/CRUD' element={<CRUD/>}></Route>
  <Route path='/admin' element={<CRUD/>}></Route> {/* 替换为实际Admin组件 */}
  <Route path='*' element={<Err404/>}></Route>
</Routes>

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