这是我的第一个网页开发项目，所以请原谅我的理解不足。
我有一个函数Navbar（），它通过用navbar类封装所有元素在我的网页上创建一个导航栏。“Logo”按钮使用navbar-brand类创建一个链接按钮，该按钮指向着陆页。我使用React Router Dom来访问我所有的页面。
为了解释一下代码...我在导航栏中使用nav-tabs类创建了动态标签。它看起来像这样：

我遇到的问题是，我希望在单击“徽标”按钮时，动态选项卡转到“主页”。

这是我的全部导航条代码。

export default function Navbar() {
  return (
    <>
    {/* Encapsulating <nav> tag with navbar class to build navbar using Bootstrap */}
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container">

        {/* "TITLE" Button */}
        {/* Need to incorporate some event handler to switch to "Home-Tab" on click */}
        <Link class="LinkStyle" to="/">
          <div class="navbar-brand">Logo</div>
        </Link>
        
        {/* "Collapse" three-line Button*/}
        {/* triggers when screen breakpoint is met with "navbar-expand-lg" */}
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        {/* Encapsulating <div> tag with collapse class to contain desired Tabs with "Collapse" button */}
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          
          {/* <ul> tag with Dynamic Tabbed Interfaces */}
          <ul class="nav nav-tabs nav-fill ms-auto" id="myTab" role="tablist">

            {/* Home Tab */}
            <li class="nav-item" role="presentation">
              <Link class="LinkStyle" to="/">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
              </Link>
            </li>
            
            {/* Drop Down Menu for "Services" linking to different pages */}
            {/* It is not recommended to use drop down menu in a Dynamic Tabbed interface for accessibility users. Test using voiceover and optimize.  */}
            <li class="nav-item dropdown">
              <button class="nav-link dropdown-toggle" id="services-tab" data-bs-toggle="dropdown" aria-expanded="false">Services</button>
                <ul class="dropdown-menu">
                    {/* All Services dropdown button */}
                    <li><Link to="/" class="LinkStyle">
                      <button class="dropdown-item" id="all_services-tab" data-bs-toggle="tab" data-bs-target="#all-services-tab-pane" type="button" role="tab" aria-controls="nav-all-services" aria-selected="false">All Services</button>
                    </Link></li>

                    <li><hr class="dropdown-divider"></hr></li>

                    {/* Service1 dropdown button */}
                    <li>
                      <Link to="/service1" class="LinkStyle">
                        <button class="dropdown-item" id="service1-tab" data-bs-toggle="tab" data-bs-target="#service1-tab-pane" type="button" role="tab" aria-controls="nav-service1" aria-selected="false">Service1</button>
                      </Link></li>

                    {/* Service2 dropdown button */}
                    <li><Link to="/service2" class="LinkStyle">
                      <button class="dropdown-item" id="service2-tab" data-bs-toggle="tab" data-bs-target="#service2-tab-pane" type="button" role="tab" aria-controls="nav-service2" aria-selected="false">Service2</button>
                    </Link></li>
                </ul> 
            </li>
            
            {/* FAQs Tab */}
            <li class="nav-item" role="presentation">
              <Link class="LinkStyle" to="/FAQs">
                <button class="nav-link" id="faqs-tab" data-bs-toggle="tab" data-bs-target="#faqs-tab-pane" type="button" role="tab" aria-controls="faqs" aria-selected="false">FAQs</button>
              </Link></li>
            
            {/* About Tab */}
            <li class="nav-item" role="presentation">
              <Link class="LinkStyle" to="/about">
                <button class="nav-link" id="about-tab" data-bs-toggle="tab" data-bs-target="#about-tab-pane" type="button" role="tab" aria-controls="about" aria-selected="false">About</button>
              </Link></li>

          </ul>
        </div>
      </div>
    </nav>  

    {/* PLACE THIS CODE UNDERNEATH NAV BAR*/}
    <div class="tab-content" style={{textAlign: "center", marginTop: 50}} id="myTabContent">
      <div class="tab-pane show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0"><h4 role="presentation">Insert Desired Home-Tab-Pane</h4></div>
      <div class="tab-pane " id="service1-tab-pane" role="tabpanel" aria-labelledby="service1-tab" tabindex="0"><h4 role="presentation">Insert Desired Service1-Tab-Pane</h4></div>
      <div class="tab-pane " id="service2-tab-pane" role="tabpanel" aria-labelledby="service2-tab" tabindex="0"><h4 role="presentation">Insert Desired Service2-Tab-Pane</h4></div>
      <div class="tab-pane " id="all-services-tab-pane" role="tabpanel" aria-labelledby="all-services-tab" tabindex="0"><h4 role="presentation">Insert Desired all-services-Tab-Pane (3)</h4></div>
      <div class="tab-pane " id="faqs-tab-pane" role="tabpanel" aria-labelledby="faqs-tab" tabindex="0"><h4 role="presentation">Insert Desired Faqs-Tab-Pane</h4></div>
      <div class="tab-pane " id="about-tab-pane" role="tabpanel" aria-labelledby="about-tab" tabindex="0"><h4 role="presentation">Insert Desired About-Tab-Pane</h4></div>
    </div>  
    </>
  );
}

在 Bootstrap 文档https：//getbootstrap.com/docs/5.3/components/navs-tabs/#via-javascript中，我尝试使用他们的方法通过JavaScript启用可切换标签。
在Navbar（）函数上方，我添加了const triggerEl = document.querySelector('#myTab button[data-bs-target="#home-tab-pane"]') bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
在“Logo”按钮div中，我以为添加id ='home-tab-pane'会触发主页标签，但它没有。我完全是在猜测，所以任何帮助都是难以置信的。抱歉，解释太长了。谢谢你的阅读！