ReactJs 刷新页面以根据 window.location.pathname 更新 link 活动状态

Question

我开始学习 ReactJS，我创建了一个有 3 个屏幕的小应用程序：主页、关于和用户。我使用 bootstrap 作为样式。

我有以下逻辑 active={window.location.pathname === "/about"} 为每个 link 传递一个布尔值以确定它是否是活动页面。

当我单击 link 时，它会加载我需要的页面，但是样式不会更新以反映 link 处于活动状态，但是如果我刷新页面，它会更新样式。

根据我在网上阅读的内容，我可以对状态做一些事情来重新加载页面以更新样式等，但我不确定如何实际实现它。

如有任何帮助，我们将不胜感激。

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

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

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

Answer 1

还有另一个名为 NavLink 的 React Router 组件，它有一个 activeClassName 属性，您可能会发现它很有用。

我是这样使用的：

<li>
  <NavLink
    activeClassName={styles.active}
    to="/path"
  >Route path
  </NavLink>
</li>

其中 active 是我从 CSS 模块中引入的 class。

ReactJs 刷新页面以根据 window.location.pathname 更新 link 活动状态

ReactJs refresh page to update link active status based on window.location.pathname

javascript

twitter-bootstrap

reactjs

react-bootstrap

App.js

Navigation.js

NavigationItem.js