使用react-router-dom时固定导航栏尺寸随页面变化的问题

我使用react-router-dom搭建多页面网站，在顶部添加了fixed定位的导航栏。但切换不同页面时，通过元素审查发现导航栏尺寸会发生细微变化（例如首页为690px，联系页为710px），导致导航栏出现偏移。导航栏采用fixed定位，理论上不应受Outlet中内容的影响，但调整Outlet内元素高度时，尺寸变化程度会减轻。

相关组件及代码 #

导航栏组件 #

import { NavLink } from "react-router-dom";
import styles from "./NavBar.module.css";

const NavBar = () => {
  return (
    <nav className={styles.nav}>
      <ul>
        <li>
          <NavLink
            className={({ isActive }) => (isActive ? styles.active : undefined)}
            to="/"
          >
            Home
          </NavLink>
        </li>
        <li>
          <NavLink
            className={({ isActive }) => (isActive ? styles.active : undefined)}
            to="/Menu"
          >
            Menu
          </NavLink>
        </li>
        <li>
          <NavLink
            className={({ isActive }) => (isActive ? styles.active : undefined)}
            to="/Contact"
          >
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
};

export default NavBar;

导航栏CSS #

.nav {
  position: fixed;
  width: 100%;
  z-index: 10;
  background-color: white;
  display: flex;
  justify-content: center;
}

.nav ul {
  list-style-type: none;
  display: flex;
  gap: 1rem;
}

.nav a {
  color: grey;
  font-weight: bold;
  text-decoration: none;
  padding-bottom: 10px;
  transition: color 0.15s border-bottom 0.15s;
  font-size: 1.15rem;
}

.nav a.active {
  color: black;
  border-bottom: 2px solid black;
}

.nav a:hover {
  color: black;
}

根组件 #

import { Outlet } from "react-router-dom";
import NavBar from "../components/NavBar/NavBar";

const Root = () => {
  return (
    <div>
      <NavBar />
      <Outlet />
    </div>
  );
};

export default Root;

首页组件 #

import styles from "./Home.module.css";
import img from "../../img/spread.jpg";
import { Link } from "react-router-dom";
import Map from "../../components/Map/Map";
import HomeContact from "./HomeContact/HomeContact";

const Home = () => {
  return (
    <div>
      <div className={styles.home}>
        <div>
          <h5>Welcome to</h5>
          <h1>Spring Garden</h1>
          <Link to="/Menu">View Menu</Link>
        </div>
        <img src={img} alt="A table full of Chinese food."></img>
      </div>
      <HomeContact />
      <Map />
    </div>
  );
};

export default Home;

首页CSS #

.home {
  display: flex;
  height: 60vh;
  align-items: center;
}

.home div {
  width: 50%;
  padding-left: 2rem;
  padding-right: 2rem;
}

.home img {
  width: 50%;
  height: 100%;
  object-fit: cover;
}

.home h1 {
  font-size: 4rem;
  line-height: 5rem;
  margin-top: 0rem;
}

.home h5 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.home a {
  text-decoration: none;
  font-weight: bold;
  background-color: rgb(205, 7, 30);
  color: white;
  padding: 1rem;
  transition: background-color 0.15s;
}

.home a:hover {
  background-color: rgb(231, 9, 35);
}

问题原因及解决方案 #

原因分析 #

最常见的原因是页面滚动条的显示/隐藏导致视口宽度变化：当不同页面的内容高度不同时，部分页面会出现垂直滚动条（占据约17px宽度），部分页面没有，这会让设为width:100%的fixed导航栏宽度跟着变化，视觉上产生偏移。另外，字体渲染差异、浏览器排版引擎的细微计算也可能导致尺寸波动。

解决办法 #

1. 强制全局显示滚动条

在全局样式文件（如index.css）中添加以下代码，确保无论页面内容高度如何，滚动条始终存在，维持视口宽度一致：

html {
  overflow-y: scroll;
}

2. 固定导航栏内部容器尺寸

给导航栏的<ul>元素添加最小宽度和重置默认内边距，避免内部元素布局波动：

.nav ul {
  list-style-type: none;
  display: flex;
  gap: 1rem;
  /* 添加以下样式 */
  min-width: 320px; /* 根据导航项总宽度调整 */
  padding: 0; /* 移除浏览器默认的ul内边距 */
  margin: 1rem 0; /* 固定上下外边距，避免高度波动 */
}

3. 稳定导航链接尺寸

给导航链接设置固定宽度和居中对齐，避免文字长度差异或字体渲染导致的宽度变化：

.nav a {
  /* 保留原有样式 */
  display: inline-block;
  width: 90px; /* 根据文字长度调整，确保所有导航项宽度一致 */
  text-align: center;
}

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