基于window.location.pathname更新链路活动状态的ReactJs刷新页面

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeLinks: [], // 链路活动状态数组
    };
  }

  componentDidMount() {
    window.addEventListener('popstate', this.handlePathChange);
  }

  componentWillUnmount() {
    window.removeEventListener('popstate', this.handlePathChange);
  }

  componentDidUpdate(prevProps, prevState) {
    if (window.location.pathname !== prevProps.location.pathname) {
      this.handlePathChange();
    }
  }

  handlePathChange = () => {
    const { activeLinks } = this.state;
    const currentPath = window.location.pathname;

    // 更新链路活动状态
    const updatedActiveLinks = [...activeLinks, currentPath];

    this.setState({
      activeLinks: updatedActiveLinks,
    });

    // 触发页面刷新
    this.forceUpdate();
  };

  render() {
    const { activeLinks } = this.state;

    return (
      <div>
        <h1>链路活动状态</h1>
        <ul>
          {activeLinks.map((link, index) => (
            <li key={index}>{link}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;