react路由用search传参如何使切换菜单后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参数的值了