[英]I'm using react-router-dom and created a fixed navbar that keeps changing size on each webpage and I don't know why
I'm using react-router-dom
to make a multi-page website and I'm trying to add a fixed navbar to the top.我正在使用
react-router-dom
来制作一个多页网站,并且我正在尝试在顶部添加一个固定的导航栏。
My navbar component and css file:我的导航栏组件和 css 文件:
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;
.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;
}
I added the navbar to my website with this:我用这个将导航栏添加到我的网站:
import { Outlet } from "react-router-dom";
import NavBar from "../components/NavBar/NavBar";
const Root = () => {
return (
<div>
<NavBar />
<Outlet />
</div>
);
};
export default Root;
Basically the contents of Outlet is changing the size of my navbar.基本上,Outlet 的内容正在改变我的导航栏的大小。 For example on the homepage the navbar is 690px wide but on the contact page its 710px wide.
例如,主页上的导航栏宽度为 690 像素,但联系页面上的导航栏宽度为 710 像素。 It appears the issue is with the size of the elements in Outlet because when I decrease the height the size change becomes less severe.
看来问题出在 Outlet 中元素的大小,因为当我降低高度时,大小变化变得不那么严重。 But navbar is fixed so I'm not sure why Outlet is affecting it.
但是导航栏是固定的,所以我不确定为什么 Outlet 会影响它。
Here is my homepage component and css files:这是我的主页组件和 css 文件:
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;
.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);
}
I'm trying to add a fixed navbar that won't change on every page of my website.我正在尝试添加一个不会在我网站的每个页面上更改的固定导航栏。 However through inspect element I see that on each page the size of nav slightly changes.
但是,通过检查元素,我看到在每个页面上导航的大小都略有变化。 This causes my navbar to offset slightly.
这会导致我的导航栏稍微偏移。 I don't understand why this happens because the navbar should not be part of the document flow.
我不明白为什么会这样,因为导航栏不应该是文档流的一部分。
The entire project is on github: https://github.com/iamgeeyuh/spring-garden-website整个项目在github: https://github.com/iamgeeyuh/spring-garden-website
Here's arunning codesandbox demo.这是一个正在运行的 codesandbox演示。
The UI doesn't have a consistent application of the CSS across the different routes that are rendered. UI 在呈现的不同路由之间没有一致的 CSS 应用程序。 I'd suggest specifying a more static layout in the
Root
component.我建议在
Root
组件中指定更多 static 布局。 Instead of making the Navbar
position fixed use a grid layout to position the nav bar in the first row and then a scrollable content row that the Outlet
and routed content is then rendered into.而不是使导航栏
Navbar
固定使用网格布局到 position 第一行的导航栏,然后是可滚动的内容行,然后将Outlet
和路由内容呈现到其中。
Root根
import { Outlet } from "react-router-dom";
import NavBar from "../components/NavBar/NavBar";
import styles from "./Root.module.css";
const Root = () => {
return (
<div className={styles.container}>
<NavBar />
<div className={styles.scrollContainer}>
<Outlet />
</div>
</div>
);
};
export default Root;
Root.module.css根模块.css
.container {
display: grid;
grid-template-rows: auto 1fr;
overflow: hidden;
height: 100vh;
}
.scrollContainer {
overflow: auto;
}
Navbar.module.css - Remove the position: fixed
and bottom padding rules. Navbar.module.css - 删除
position: fixed
和底部填充规则。
.nav {
list-style-type: none;
text-align: center;
background-color: white;
/* position: fixed; */ <-- remove
width: 100%;
z-index: 10;
margin-top: 0;
/* padding-bottom: 1rem; */ <-- remove
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.