为什么刷新锚定链接/尝试直接转到锚定链接会到达页面顶部？

Question

我在网站上有按钮，很自然地，我创建了锚点和指向这些锚点的链接。这些按钮可以使用，但是当我刷新页面或尝试从新选项卡转到该特定锚点时（例如），该按钮始终指向页面顶部。

（例如，在下面的代码中，有一个ID为“关于”的部分。当我单击导航栏中显示为“关于”的按钮时，它将URL更改为“ ... /＃about”，但是，当我使用网址“ ... /＃about”刷新页面或尝试从新标签页转到“ ... /＃about”时，该页面始终位于页面顶部（但该网址不会更改为“ ...”，因此不会重定向）。

我希望用户能够从新标签页或其他网站转到“ ... /＃about”并直接转到“关于”部分，但是我该怎么做？谢谢！

这是我的代码（请告诉我您是否还想看）：

const Index = () => {
    return (
        <div>
            <Header />

            <div className="all-content">
                <Hero />

                <Social />

                <section id="about">
                    <About />
                </section>

                <section id="projects">
                    <Projects />
                </section>

                <section id="hobbies">
                    <Hobbies />
                </section>

                <section id="contact">
                    <Contact />
                </section>
            </div>
        </div>
    );
}

export default Index;