React bootstrap Nav.Link 仅在第二次单击时显示为活动状态

Question

我添加了一个基本的 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

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>
  );
}

您可以简单地获取您单击的选项卡或菜单唯一的 id 状态并设置该菜单的状态，然后在样式或类中您可以使用三元检查 请查看上面的代码或复制并运行。