如何在react路由器中更改URL时重新加载组件

npm install react-router-dom

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

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
};

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

const MyComponent = () => {
  const location = useLocation();

  useEffect(() => {
    // 在这里执行重新加载组件的逻辑
    // 例如，重新获取数据或执行其他操作
  }, [location]);

  return (
    // 组件的内容
  );
};