我是web開發(fā)新手，我最近開始練習(xí)Reactjs。我想創(chuàng)建自己的作品集網(wǎng)站作為練習(xí)。我做了一個導(dǎo)航欄作為組件，同樣也做了一個主頁。我想在主頁的導(dǎo)航欄下面放一個人的照片，如果有意義的話。我創(chuàng)建了一個img標(biāo)簽并插入了一張圖片，但是當(dāng)我每次切換頁面時，導(dǎo)航條都會移動。

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";
import About from "./pages/About";
import Project from "./pages/Project";
import Skills from "./pages/Skills";
import Contact from "./pages/Contact";
import "./App.css";

const App = () => {
return (
    <div>
        <Navbar />
        <div className="main-container">
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/project" element={<Project />} />
                <Route path="/skills" element={<Skills />} />
                <Route path="/contact" element={<Contact />} />
            </Routes>
        </div>
    </div>
);
};

export default App;



import "./Navbar.css";
import { NavLink } from "react-router-dom";

const Navbar = () => {
return (
    <nav className="nav">
        <div className="right">
            <ul className="nav-links">
                <li>
                    <NavLink to="/" className="a">
                        Home
                    </NavLink>
                </li>
                <li>
                    <NavLink to="/about" className="a">
                        About
                    </NavLink>
                </li>
                <li>
                    <NavLink to="/project" className="a">
                        Project
                    </NavLink>
                </li>
                <li>
                    <NavLink to="/skills" className="a">
                        Skills
                    </NavLink>
                </li>
                <li>
                    <NavLink to="/contact" className="a">
                        Contact
                    </NavLink>
                </li>
            </ul>
        </div>
    </nav>
);
};

export default Navbar;


.nav {
display: flex;
height: 60px;
justify-content: center;
background-color: #171923;
align-items: center;
}

ul {
display: flex;
list-style: none;
gap: 4em;
}

ul li a {
font-size: 16px;
font-weight: 500;
text-decoration: none;
color: #ffffff;
}

.nav-links li:hover a {
color: #4c9e9e;
transition: 0.3s ease;
}

.nav-links a.active {
color: #4c9e9e;
}


import React from "react";
import photo1 from "../images/photo1.jpg";

const Home = () => {
return (
    <main>
        <div className="top">
            <img src={photo1} alt="" className="hero-img" />
        </div>
        <div className="mid">
            <div className="title">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, recusandae.
            </div>
            <div className="desc">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, veniam?
            </div>
        </div>
        <div className="end">
            <span>
                <button>connect</button>
            </span>
            <span>
                <ul>
                    <li>
                        <a href="contact">contact me</a>
                    </li>
                </ul>
            </span>
        </div>
    </main>
);
};

export default Home;


main {
display: flex;
flex-direction: column;
height: calc(100vh - 60px);
align-items: center;
justify-content: center;
}
.hero-img {
max-width: 670px;
height: auto;
}