如何更改React Router Link组件中的状态？

import React, { useState } from 'react';

function MyComponent() {
  const [isActive, setIsActive] = useState(false);

  // ...
}

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false,
    };
  }

  // ...
}

import { Link } from 'react-router-dom';

function MyComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <Link to="/" isActive={isActive}>Home</Link>
    </div>
  );
}

import { Link } from 'react-router-dom';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false,
    };
  }

  render() {
    return (
      <div>
        <Link to="/" isActive={this.state.isActive}>Home</Link>
      </div>
    );
  }
}

import { Link } from 'react-router-dom';

function MyComponent() {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <Link to="/" isActive={isActive} onClick={handleClick}>Home</Link>
    </div>
  );
}

import { Link } from 'react-router-dom';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false,
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      isActive: !prevState.isActive,
    }));
  };

  render() {
    return (
      <div>
        <Link to="/" isActive={this.state.isActive} onClick={this.handleClick}>Home</Link>
      </div>
    );
  }
}