Html 锚点链接库在我的React项目中根本不起作用

我尝试了多个锚链接库，以便在单击导航栏时滚动到我页面的各个部分，以方便活动类。使用正常的锚元素（如

中的锚元素）将捕捉到具有相应ID的元素，但是没有任何滚动库可以工作。例如，我最近的一次尝试，React Scroll。这是我的导航组件（为便于阅读而简化）：

从“React”导入React
从“样式化组件”导入样式化
从“./SideNav.module.scss”导入样式
从'react icons/fa'导入{FaGithubSquare，FaLinkedin}
从“反应滚动”导入{Link，animateScroll as scroll}
const SideNav=（）=>{
返回(
乔希·班格尔
网络开发。配音演员。爸爸。书呆子。

测试链路

)
}
导出默认侧导航

以及其中具有相应ID的组件：

import React from 'react';
import styled from 'styled-components'

const Contact = () => {
    return (
        <section id='test1'>
            <ContactContent>
                <Headline>Contact me</Headline>
                <h1>Feel free to reach out to me through LinkedIn, or email me directly at:</h1>
                <Email>joshua.bangle@gmail.com</Email>
            </ContactContent>
        </section>
    );
}

export default Contact;

从“React”导入React；
从“样式化组件”导入样式化
常量联系人=（）=>{
返回(
联系我
请随时通过LinkedIn与我联系，或直接发送电子邮件至：
约书亚。bangle@gmail.com
);
}
导出默认联系人；

---

我尝试了多种包，多种编写锚的方法，但什么都没有发生。我开始怀疑我安装的另一个软件包是否干扰了软件包的滚动功能。如果可能的话，我可以链接到github回购协议，如果有人愿意查看的话。提前感谢您的帮助。

我发现了我的问题。我使用的布局组件代码如下：

import React from 'react';

import SideNav from '../SideNav/SideNav'
import styled from 'styled-components'
import Skillset from '../Skillset/Skillset'
import Projects from '../Projects/Projects'
import Contact from '../Contact/Contact'
import TestNav from '../../TestNav'



const LayoutWrapper = styled.div`
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
`

const ContentWrapper = styled.div`
    display: block;
    height: 100vh;
    width: 100%;
    margin-left: 300px;
    overflow: auto;
`

const Layout = (props) => {


    return (
        <LayoutWrapper>
            <TestNav />
            <SideNav  />
            <ContentWrapper>
                <Skillset/>
                <Projects/>
                <Contact/>
            </ContentWrapper>
            
        </LayoutWrapper>
    );
}

export default Layout;

从“React”导入React；
从“../SideNav/SideNav”导入SideNav
从“样式化组件”导入样式化
从“../Skillset/Skillset”导入Skillset
从“../Projects/Projects”导入项目
从“../Contact/Contact”导入联系人
从“../../TestNav”导入TestNav
const layoutwapper=styled.div`
文本对齐：居中；
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100vh；
`
const ContentWrapper=styled.div`
显示：块；
高度：100vh；
宽度：100%；
左边距：300px；
溢出：自动；
`
常量布局=（道具）=>{
返回(
);
}
导出默认布局；

---

溢出

样式在某种程度上妨碍了锚函数。我已经删除了它，并对代码进行了重构，以更好地实现我想要的粘性边栏特性。我不完全确定溢出为什么会产生这种效果，但是移除它为我解决了这个问题。

to='test1'不应该是

to='test1'

？显然不是使用React Scroll库。看起来不错-javascript控制台中一定打印了错误。可能是错误阻止了其他脚本的执行。我会开始检查chrome开发控制台中是否显示了一个=\

import React from 'react';

import SideNav from '../SideNav/SideNav'
import styled from 'styled-components'
import Skillset from '../Skillset/Skillset'
import Projects from '../Projects/Projects'
import Contact from '../Contact/Contact'
import TestNav from '../../TestNav'



const LayoutWrapper = styled.div`
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
`

const ContentWrapper = styled.div`
    display: block;
    height: 100vh;
    width: 100%;
    margin-left: 300px;
    overflow: auto;
`

const Layout = (props) => {


    return (
        <LayoutWrapper>
            <TestNav />
            <SideNav  />
            <ContentWrapper>
                <Skillset/>
                <Projects/>
                <Contact/>
            </ContentWrapper>
            
        </LayoutWrapper>
    );
}

export default Layout;