React bootstrap 自定义导航 link 活动样式不起作用

Question

实际上我想将选项卡菜单的活动样式设置为悬停样式。即使我尝试使用 activeClassName="selected" 也不起作用。谁能帮助解决我正在尝试的问题？

CSS 我正在使用

.my-navbar{
  color: #037979;
  font-size: 16px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 1.6rem;
  text-decoration: none;
  margin: 10px  10px 10px  10px;

}
.my-navbar:visited {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 16px;
}
.my-navbar:hover {
  text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #c10944;
  font-size: 16px;
  background-color: #61dafb;
}
.active {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #c10944;
  font-size: 16px;
  background-color: #61dafb;
}

react-bootstrap, react-router-dom 这些是 import using

 <Router>
                {/*header Menu Bar*/}
                <div className="mycontainer">
                    <Navbar bg="transparent" expand="lg">
                        <Navbar.Brand>
                            <div>
                                <img src={logo} alt="logo" width="200" />
                                {/*   <img src={process.env.PUBLIC_URL + "./images/logo.png"} alt="mypic" width="200" /> */}
                            </div>
                        </Navbar.Brand>

                        <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
                        <Navbar.Collapse id="navbar-toggle" style={{marginTop: 30}}>
                            <Nav className="ml-auto" bsStyle="tabs" >
                                <Link activeClassName="selected" className="my-navbar" to="/">Home</Link>
                                <Link activeClassName="selected" className="my-navbar" to="/about">About</Link>
                                <Link className="my-navbar" to="/services">Services</Link>
                                <Link className="my-navbar" to="/contact">Contact</Link>
                                <Link className="my-navbar" to="/galleries">Galleries</Link>

                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </div>
                {/*Slider Bar*/}
                <Slidingmain />
                <div style={{ paddingTop: 50 }}>
                    <Route defaultActiveKey="/home"  path="/" exact render={() => <HomePage title={this.state.home.title} subTitle={this.state.home.subTitle} text={this.state.home.text} />}  className="container-full"/>
                    <Route path="/about" render={() => <AboutPage title={this.state.about.title} subTitle={this.state.about.subTitle} text={this.state.about.text} />} />
                    <Route path="/services" render={() => <ServicesPage title={this.state.services.title} />} />
                    <Route path="/contact" render={() => <ContactPage title={this.state.contact.title} />} />
                    <Route path="/galleries" render={() => <GalleriesPage title={this.state.galleries.title} />} />
                    <Footer />
                </div>

            </Router >

Answer 1

请使用 <NavLink activeClassName="active"> 而不是 <Link activeClassName="selected">。

import { NavLink } from 'react-router';

有关详细信息，请访问 https://reacttraining.com/react-router/web/api/NavLink

Answer 2

如果使用 react-bootstrap Nav.Link 你可以使用 defaultActiveKey 像这样：

<Nav defaultActiveKey="#home" className="mr-auto">
   <Nav.Link href="#home">Home</Nav.Link>

React bootstrap 自定义导航 link 活动样式不起作用

React bootstrap custom nav link active style is not working

reactjs

react-bootstrap

react-css-modules

bootstrap-4