React 路由：如何保留菜单切换后的 Search 传参

在 React 路由中保留 search 参数，可以使用'search'属性将参数传递给<Link>或<NavLink>组件。这样在切换菜单时，search参数将保留不变。

例如，假设你有以下两个菜单项：

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

function Menu() {
  return (
    <div>
      <Link to='/page1?param1=value1'>Page 1</Link>
      <Link to='/page2?param2=value2'>Page 2</Link>
    </div>
  );
}

在上面的例子中，当你点击'Page 1'时，会导航到'/page1?param1=value1'，点击'Page 2'时，会导航到'/page2?param2=value2'。在切换菜单时，search参数将保留不变。

在'/page1'和'/page2'的组件中，你可以通过props.location.search获取search参数的值：

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

function Page1() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const param1 = searchParams.get('param1');

  return (
    <div>
      <h2>Page 1</h2>
      <p>param1: {param1}</p>
    </div>
  );
}

function Page2() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const param2 = searchParams.get('param2');

  return (
    <div>
      <h2>Page 2</h2>
      <p>param2: {param2}</p>
    </div>
  );
}

在上面的例子中，searchParams.get('param1')将返回'value1'，searchParams.get('param2')将返回'value2'。这样，你就可以在切换菜单时保留search参数的值了。