我开始学习ReactJS，我已经创建了一个小应用程序与3个屏幕：主页，关于&用户。我正在使用 Bootstrap 的样式。
我有下面的逻辑active={window.location.pathname === "/about"}为每个链接传递一个布尔值，以确定它是否是活动页面。
当我点击链接时，它会加载我需要的页面，但是样式不会更新，以反映链接是活动的，但是如果我刷新页面，它会更新样式。
从我在网上读到的，我可以做一些与状态，以重新加载页面，更新样式等，但我不知道如何实际实现这一点。
如有任何帮助，我们将不胜感激。
应用程序. js

import React, { Component } from 'react';

import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";

import './App.css';

import Navigation from './components/navigation';

import Home from './views/home';
import Users from './views/users';
import About from './views/about';

export default class App extends Component {
  render(){
    return (
      <div className="App">
        <Router>
          <Navigation></Navigation>
          <Switch>
            <Route path="/about"><About /></Route>
            <Route path="/users"><Users /></Route>
            <Route path="/"><Home /></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

导航. js

import React, { Component, useState } from 'react';

import NavigationItem from './navigationItem';

export default class Navigation extends Component {

    render(){
        return( 
            <div>
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container-fluid">
                        <a class="navbar-brand" href="#">Navbar</a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                <NavigationItem active={window.location.pathname === "/"} path="/" content="Home"></NavigationItem>
                                <NavigationItem active={window.location.pathname === "/about"} path="/about" content="About"></NavigationItem>
                                <NavigationItem active={window.location.pathname === "/users"} path="/users" content="Users"></NavigationItem>    
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>     
        );
    }
}

导览项目. js

import React, { Component } from 'react';
import {Link} from "react-router-dom";

export default class NavigationItem extends Component {
    render(){
        if(this.props.active){
            return(
                <li class="nav-item">
                    <Link class="nav-link active" to={this.props.path}>{this.props.content}</Link>
                </li> 
            );
        } else {
            return(
                <li class="nav-item">
                    <Link class="nav-link" to={this.props.path}>{this.props.content}</Link>
                </li> 
            );
        }
    }
}