React bootstrap Nav.Link only showing as active on second click - reactjs

Question

I have added a basic react-bootstrap navbar and set the NavLinks up as react-router .Links.
When I click on the links they do not show as active. They will only show as active on the second click of the same link. The router is set up in the app.js file. How do I get them to show as active on first click?
Here is the code for my NavBar component:
import { Navbar, Nav, Container } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import LanguageSwitchSelector from './LanguageSwitchSelector'
import Logout from './Logout'
import { useSelector } from 'react-redux'
import text from '../data/text'
const NavBar = () => {
const currentLanguage = useSelector((state) => state) //retrieves current language from store
if(!currentLanguage) {
return null
}
const code = currentLanguage.code
return (
<div>
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Container>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link as={Link} to="/dashboard">
{text[code]['dashboard']}
</Nav.Link>
<Nav.Link as={Link} to="/competitions">
{text[code]['competitions']}
</Nav.Link>
<Nav.Link as={Link} to="/tracks">
{text[code]['tracks']}
</Nav.Link>
</Nav>
</Navbar.Collapse>
<LanguageSwitchSelector />
<Logout text={text[code]['logout']} />
</Container>
</Navbar>
</div>
)
}
export default NavBar
App.js
import React, { useState, useEffect } from 'react'
import {
BrowserRouter as Router,
Switch,
Route,
Redirect,
} from 'react-router-dom'
import { useDispatch } from 'react-redux'
import Login from './components/Login'
import Dashboard from './components/Dashboard'
import ManageCompetitions from './components/ManageCompetitions'
import ManageTracks from './components/ManageTracks'
import { initLanguage } from './reducers/languageReducer'
const App = () => {
const [user, setUser] = useState()
const dispatch = useDispatch()
useEffect(() => {
const loggedInUser = localStorage.getItem('user')
const savedLanguage = localStorage.getItem('lang')
if (savedLanguage) {
const foundLanguage = JSON.parse(savedLanguage)
dispatch(initLanguage(foundLanguage))
console.log('found language ', foundLanguage)
} else {
dispatch(initLanguage())
}
if (loggedInUser) {
const foundUser = JSON.parse(loggedInUser)
setUser(foundUser)
console.log(foundUser)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return (
<Router>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/competitions">
<ManageCompetitions />
</Route>
<Route path="/tracks">
<ManageTracks />
</Route>
<Route path="/">
{user ? <Redirect to="/dashboard" /> : <Redirect to="/login" />}
</Route>
</Switch>
</Router>
)
}
export default App

Answer 1

import React, { useState } from 'react';
import { Navbar, Nav, Container } from 'react-bootstrap';
export default function App() {
const [id, setID] = useState('test1');
const handleActive = (id) => {
setID(id);
};
return (
<div>
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Container>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link
onClick={() => handleActive('test1')}
to="/test1"
style={{ color: id === 'test1' ? 'red' : '' }}
>
test1
</Nav.Link>
<br />
<Nav.Link
onClick={() => handleActive('test2')}
id={'test2'}
to="/test2"
style={{ color: id === 'test2' ? 'red' : '' }}
>
test2
</Nav.Link>
<br />
<Nav.Link
onClick={() => handleActive('test3')}
id={'test3'}
to="/test3"
style={{ color: id === 'test3' ? 'red' : '' }}
>
test3
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
);
}
You can simple take a state of id which unique the tab or menu you click on and set the state of that menu then in style or class you can use ternary check
please have a look above code or copy and run.