我添加了一个基本的 react-bootstrap 导航栏,并将 NavLinks 设置为 react-router .Links。当我单击链接时,它们不会显示为活动状态。它们只会在第二次单击同一链接时显示为活动状态。路由器在 app.js 文件中设置。如何让它们在第一次点击时显示为活动状态?
这是我的 NavBar 组件的代码:
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
应用程序.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