如何在react中使用useEffect在新的路由更改上重新呈现变量

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useLocation } from 'react-router-dom';

function MyComponent() {
  const [myVariable, setMyVariable] = useState('');

  // useEffect钩子函数用于在组件渲染后执行副作用操作
  useEffect(() => {
    // 在这里可以执行一些需要在变量更改时触发的操作
    console.log('myVariable has changed:', myVariable);
  }, [myVariable]); // 通过传递myVariable作为依赖项，确保只有myVariable发生变化时才会重新执行useEffect

  return (
    <div>
      {/* 在这里可以添加路由链接 */}
      <Link to="/route1">Route 1</Link>
      <Link to="/route2">Route 2</Link>

      {/* 使用React Router的Switch和Route组件来定义路由 */}
      <Switch>
        <Route path="/route1">
          {/* 在这里可以更新myVariable的值 */}
          <button onClick={() => setMyVariable('Route 1')}>Update Variable</button>
        </Route>
        <Route path="/route2">
          {/* 在这里可以更新myVariable的值 */}
          <button onClick={() => setMyVariable('Route 2')}>Update Variable</button>
        </Route>
      </Switch>
    </div>
  );
}

function App() {
  return (
    <Router>
      <MyComponent />
    </Router>
  );
}