如何在REACTJS中使用钩子从一个组件到另一个组件的不同url中获取状态？

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

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/component1" component={Component1} />
        <Route path="/component2" component={Component2} />
      </Switch>
    </Router>
  );
}

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

function Component1() {
  const { id } = useParams();

  // 使用id参数进行状态获取或其他操作
  // ...

  return (
    <div>
      <h2>Component 1</h2>
      <p>ID: {id}</p>
    </div>
  );
}

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

function Component2() {
  const location = useLocation();
  const { pathname } = location;

  // 使用pathname进行状态获取或其他操作
  // ...

  return (
    <div>
      <h2>Component 2</h2>
      <p>Current URL: {pathname}</p>
    </div>
  );
}