React路由切换后参数丢失解决方案 - 保留搜索参数

在React中，当你切换菜单并导航到另一个路由时，通常会重新渲染整个页面。这意味着之前路由上的参数将会丢失。

要在切换菜单后保留参数，可以使用React Router提供的URL参数。

首先，在你的路由配置中，将需要传递的参数添加到路由路径中。例如：

<Route path='/search/:keyword' component={SearchComponent} />

然后，在切换菜单时，使用React Router提供的Link组件来导航到带参数的路由。例如：

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

...

<Link to={`/search/${keyword}`}>Search</Link>

这样，当你切换菜单并导航到搜索页面时，参数将会被传递到SearchComponent组件中。你可以在SearchComponent中使用props.match.params.keyword来获取参数的值。

如果你需要在搜索页面切换菜单后保留参数，需要在菜单组件中保存当前的参数并传递给下一个路由。你可以使用React的状态（state）或者Redux来实现这个功能。

使用状态（state）的示例：

class MenuComponent extends React.Component {
  state = {
    keyword: ''
  };

  handleKeywordChange = (event) => {
    this.setState({ keyword: event.target.value });
  };

  render() {
    const { keyword } = this.state;

    return (
      <div>
        <input type='text' value={keyword} onChange={this.handleKeywordChange} />
        <Link to={`/search/${keyword}`}>Search</Link>
      </div>
    );
  }
}

使用Redux的示例：

import { connect } from 'react-redux';
import { setKeyword } from './actions';

class MenuComponent extends React.Component {
  handleKeywordChange = (event) => {
    this.props.setKeyword(event.target.value);
  };

  render() {
    const { keyword } = this.props;

    return (
      <div>
        <input type='text' value={keyword} onChange={this.handleKeywordChange} />
        <Link to={`/search/${keyword}`}>Search</Link>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  keyword: state.keyword
});

const mapDispatchToProps = {
  setKeyword
};

export default connect(mapStateToProps, mapDispatchToProps)(MenuComponent);

无论你使用哪种方法，都需要确保在菜单组件中保存当前的参数，并在切换菜单时传递给下一个路由。这样，当你切换菜单后，参数将会被保留并传递给搜索页面。