我试图建立一个网站，只是一个单一的页面，与导航栏使用不同的元素。（类似于在this example中给出的示例网站），但在React，而不是原生Javascript。
到目前为止，我有一个NavBar.tsx和App.tsx，其中NavBar.tsx是

import { Button, Link } from 'react-scroll';
import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { useEffect } from 'react';
import { useRef } from 'react';

export interface NavBarProps {
    events?: string;
    team?: string;
    sponsors?: string;
    contact?: string;
    corporate?: string;
}

export default function NavBar(props: NavBarProps) {

    let myRef: Array<HTMLDivElement> = [];

    const saveRef = (ref: HTMLDivElement) => {
        myRef.push(ref);
    }

    return (
        <ul className="w-full sticky top-0">
            <li>
                <Link className="link inline float-right p-5 hover:bg-yellow-400 text-white" id="navBar"
                    activeClass="active" to={props.events} spy={true} smooth={true} offset={-70} duration={500}
                    ref={saveRef}>
                    Events
                </Link>
                <div ref={saveRef}>
                    <Link className="link inline float-right p-5 hover:bg-yellow-400 text-white" id="navBar"
                        activeClass="active" to="projects" spy={true} smooth={true} offset={-70} duration={500}
                        ref={saveRef}>
                        Our Team
                    </Link>
                </div>
                <div ref={saveRef}>
                    <Link className="link inline float-right p-5 hover:bg-yellow-400 text-white" id="navBar"
                        activeClass="active" to="blog" spy={true} smooth={true} offset={-70} duration={500}
                        ref={saveRef}>
                        Sponsors
                    </Link>
                </div>
                <div ref={saveRef}>
                    <Link className="link inline float-right p-5 hover:bg-yellow-400 text-white" id="navBar"
                        activeClass="active" to="contact" spy={true} smooth={true} offset={-70} duration={500}
                        ref={saveRef}>
                        Contact Us
                    </Link>
                </div>
                <div ref={myR}>
                    <Link className="link inline float-right p-5 hover:bg-yellow-400 text-white" id="navBar"
                        activeClass="active" to="section1" spy={true} smooth={true} offset={-70} duration={500}
                        >
                        Corporate
                    </Link>
                </div>
            </li>
        </ul>
    )
}

(This到目前为止只是为了测试，因此不同链接之间的一些信息可能会不同。另外，类名很长，因为我使用的是Tailwind）。
我使用链接来确保当点击navBar时，页面会将您带到正确的元素。
然而，我不知道我将如何改变这一点，使网站与顺利滚动（再次像在网站，但不是一个侧面导航栏，我有一个顶部导航栏）。
我的App.tsx基本上只有4个链接指向的部分，虽然一些youtube视频和网站像我链接的是有帮助的，我不知道如何导入到React Typescript.我看到react-scroll是有帮助的，但我不知道如何使用这些与react-router-dom链接.
谢谢你，我会很高兴提供任何更多的信息，我的项目。