React Bootstrap 导航栏主页选项卡总是突出显示答案

【问题标题】：React Bootstrap Nav bar Home tab always appears to be highlightedReact Bootstrap 导航栏主页选项卡总是突出显示
【发布时间】：2021-09-20 00:39:47
【问题描述】：

我第一次涉足 react 和 bootstrap，但遇到了一个我似乎无法弄清楚的简单问题。因此，当我运行网站时，主页选项卡会突出显示，这很棒，我希望它这样做。但是，当我单击另一个选项卡时，另一个选项卡以及主页选项卡都会突出显示。如何解决此问题，以便一次仅突出显示一个选项卡？我将添加我的大部分代码，这样你们就可以看到发生了什么。提前致谢！

这张图片代表如果我点击关于我们，你可以看到家也被突出显示，我只希望一次突出显示一个标签。

我的应用类

import './App.css';
import Main from './components/Main.js';
function App() {
  return (
    <div className="App">
      <Main />
    </div>
  );
}

export default App;

处理导航的主类

import React from 'react';
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from './Home';
import AboutUs from './AboutUs';
import Services from './Services';
import ContactUs from './ContactUs';


const Main = () => {
  return (
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={Home}></Route>
            <Route exact path='/AboutUs' component={AboutUs}></Route>
            <Route exact path='/Services' component={Services}></Route>
            <Route exact path='/ContactUs' component={ContactUs}></Route>
        </Switch>
    </BrowserRouter>
   
  );
}

export default Main;

导航栏类

import {LinkContainer} from 'react-router-bootstrap';
import {Navbar, Nav, Link, } from "react-bootstrap";

function TopNavBar() {

    return (
        <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
          <Navbar.Brand>React-Bootstrap</Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav>
              <LinkContainer to="/">
                <Nav.Link>Home</Nav.Link>
              </LinkContainer>
              <LinkContainer to="/AboutUs">
                <Nav.Link>About us</Nav.Link>
              </LinkContainer>
              <LinkContainer to="/Services">
                <Nav.Link>Services</Nav.Link>
              </LinkContainer>
              <LinkContainer to="/ContactUs">
                <Nav.Link>Contact us</Nav.Link>
              </LinkContainer>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
    );
  }
  
  export default TopNavBar;

Home 类 - 当前的 home、关于我们、联系我们和服务类看起来都一样，但具有不同的 h1 标题

import  TopNavBar  from './Navbar.js';

function Home() {
    return (
      <div> 
        <TopNavBar> </TopNavBar>
        <h1> Home </h1>
      </div>
      
    );
  }
  
  export default Home;

【问题讨论】：

标签： html reactjs react-bootstrap

【解决方案1】：

我发现如果我摆脱我的主页选项卡并在 Navbar.brand 周围放置一个用于主屏幕的链接容器，它将按预期工作，但我不确定这是否是我正在寻找的答案。

import {LinkContainer} from 'react-router-bootstrap';
import {Navbar, Nav} from "react-bootstrap";

function TopNavBar() {

    return (
        <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
          <LinkContainer to="/">
            <Navbar.Brand>React-Bootstrap</Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav>
              <LinkContainer to="/AboutUs">
                <Nav.Link>About us</Nav.Link>
              </LinkContainer>
              <LinkContainer to="/Services">
                <Nav.Link>Services</Nav.Link>
              </LinkContainer>
              <LinkContainer to="/ContactUs">
                <Nav.Link>Contact us</Nav.Link>
              </LinkContainer>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
    );
  }
  
  export default TopNavBar;

【讨论】：

【解决方案2】：

将exact 添加到LinkContainer 或使用IndexLinkContainer

https://github.com/react-bootstrap/react-router-bootstrap/issues/151

【讨论】：