React bootstrap custom nav link active style is not working

Question

Actually I want to make an active style of tab menu as hover style. Even I tried with activeClassName="selected" not working. Can anyone help the issue which I am trying?

CSS which I am using

.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 these are the 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

Please use <NavLink activeClassName="active"> instead of <Link activeClassName="selected">.

import { NavLink } from 'react-router';

For more information, visit https://reacttraining.com/react-router/web/api/NavLink