React 路由：使用 search 传参时，切换菜单后如何保留参数

要使切换菜单后 search 传参不消失，你可以使用'location'对象的'search'属性来获取当前的 search 参数，并将其添加到'push'方法的目标路径中。这样，切换菜单后，push 方法会将之前的 search 参数保留下来。

下面是一个示例代码：

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

class Menu extends React.Component {
  render() {
    return (
      <div>
        <Link to="/page1">Page 1</Link>
        <Link to="/page2">Page 2</Link>
      </div>
    );
  }
}

class Page1 extends React.Component {
  handleClick = () => {
    const { history } = this.props;
    const currentSearch = this.props.location.search;
    history.push(`/page2${currentSearch}`);
  };

  render() {
    return (
      <div>
        <h1>Page 1</h1>
        <button onClick={this.handleClick}>Go to Page 2</button>
      </div>
    );
  }
}

class Page2 extends React.Component {
  handleClick = () => {
    const { history } = this.props;
    const currentSearch = this.props.location.search;
    history.push(`/page1${currentSearch}`);
  };

  render() {
    return (
      <div>
        <h1>Page 2</h1>
        <button onClick={this.handleClick}>Go to Page 1</button>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Menu />
          <Route path="/page1" component={Page1} />
          <Route path="/page2" component={Page2} />
        </div>
      </Router>
    );
  }
}

export default App;

在这个示例中，当你在Page1点击"Go to Page 2"按钮时，会跳转到Page2并保留之前的 search 参数。同样，当你在Page2点击"Go to Page 1"按钮时，会跳转到Page1并保留之前的 search 参数。