为什么我的react页面返回时没有单击按钮？

import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  useEffect(() => {
    return history.listen((location) => {
      // 强制组件重新渲染
      console.log('Route changed:', location.pathname);
    });
  }, [history]);

  return (
    <button onClick={() => alert('Button clicked!')}>Click Me</button>
  );
}

<button onClick={handleClick}>Click Me</button>

function handleClick() {
  alert('Button clicked!');
}

import { useState, useEffect } from 'react';

function MyComponent() {
  const [isEnabled, setIsEnabled] = useState(true);

  useEffect(() => {
    // 恢复状态逻辑
    setIsEnabled(true);
  }, []);

  return (
    <button onClick={() => setIsEnabled(false)} disabled={!isEnabled}>
      Click Me
    </button>
  );
}

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/my-component" component={MyComponent} />
        {/* 其他路由 */}
      </Switch>
    </Router>
  );
}