react-router v6:使用searchParams导航到某个v6

import { BrowserRouter as Router, Route, Link, Outlet, useSearchParams } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <button onClick={() => navigateToPageWithParams()}>Go to Page with Params</button>
      </nav>
      <Route path="/" element={<HomePage />} />
      <Route path="/page" element={<PageWithParams />} />
    </Router>
  );
}

function HomePage() {
  const navigateToPageWithParams = () => {
    window.history.pushState({}, '', '/page?param1=value1&param2=value2');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={navigateToPageWithParams}>Go to Page with Params</button>
    </div>
  );
}

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

  return (
    <div>
      <h1>Page with Params</h1>
      <p>Param1: {searchParams.get('param1')}</p>
      <p>Param2: {searchParams.get('param2')}</p>
    </div>
  );
}

export default App;

// 确保 URL 格式正确
window.history.pushState({}, '', '/page?param1=value1&param2=value2');

// 确保路由配置正确
<Route path="/page" element={<PageWithParams />} />