如何访问有状态组件中的url参数

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

function MyComponent() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  const param1 = queryParams.get('param1');
  const param2 = queryParams.get('param2');

  return (
    <div>
      <p>Param1: {param1}</p>
      <p>Param2: {param2}</p>
    </div>
  );
}

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

function MyComponent() {
  const [searchParams] = useSearchParams();

  const param1 = searchParams.get('param1');
  const param2 = searchParams.get('param2');

  return (
    <div>
      <p>Param1: {param1}</p>
      <p>Param2: {param2}</p>
    </div>
  );
}

const param1 = 'value1';
const param2 = 'value2';
const url = `https://example.com/page?param1=${encodeURIComponent(param1)}&param2=${encodeURIComponent(param2)}`;

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/page" element={<MyComponent />} />
      </Routes>
    </Router>
  );
}