새 페이지가 로드될 때마다 React 사이드바가 흔들리는 원인은 무엇입니까?

Question

문맥 상 저는 React-Bootstrap 라이브러리를 사용하고 있습니다. 코드에서 href를 클릭할 때마다 사이드바가 스타일이 지정되지 않은 상태로 재설정된 다음 일반 형식으로 돌아가는 것처럼 0.5초 동안 흔들립니다. 왜 이런 일이 일어나는지 아는 사람이 있나요? 내 코드가 너무 느리기 때문인가요? 내 사이드바 코드는 다음과 같습니다.

import React from "react";
import "../../App.css";
import { Nav, Navbar } from "react-bootstrap";
import ProfileSection from "./ProfileSection";
import ContactBar from "./ContactBar";
import HomeItem from "./SidebarItems/HomeItem";
import BlogItem from "./SidebarItems/BlogItem";
import WorkItem from "./SidebarItems/ProjectItem";
import PhilItem from "./SidebarItems/PhilItem";
import { Container } from "@mui/system";

function Sidebar() {
    return (
        <Navbar expand="lg">
            <Container>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav defaultActiveKey="/" className="flex-column">
                        <ProfileSection />
                        <HomeItem />
                        <BlogItem />
                        <WorkItem />
                        <PhilItem />
                        <ContactBar />
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    )
};

export default Sidebar;

Answer 1

귀하의 코드는 내 기기에서 제대로 작동합니다. 인터넷이나 기기에 문제가 있는 것 같습니다. 귀하의 코드도 확인했는데 코드에 아무런 문제가 없습니다. 일단 배포되면 제대로 작동하는지 걱정할 필요가 없습니다.