React Router v4：同路由不同查询参数重定向报错求助

这个问题我做搜索功能时也碰到过，React Router的<Redirect>组件默认判断"同路由"只会看路径部分（比如/search/hotels），完全忽略查询参数，所以在同一个路径下换q参数时，就会抛出那个讨厌的错误。下面给你几个优雅的解决思路：

1. 用history.push替代<Redirect>组件 #

这是最直接的方案，history.push不会做同路由校验，只要URL有变化（哪怕只是查询参数），都会直接添加一条新的浏览器历史记录，完美满足你的需求。

类组件实现方式： #

先用withRouter高阶组件包裹Search组件，拿到history对象：

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

class Search extends Component {
  // ...你的其他逻辑

  handleSearch = (e) => {
    e.preventDefault();
    if (this.state.isReady) {
      const queryString = `q=${encodeURIComponent(this.state.q)}`;
      // 直接push新URL，自动添加历史记录
      this.props.history.push(`/search/hotels?${queryString}`);
      // 重置isReady状态，避免重复触发
      this.setState({ isReady: false });
    }
  };

  render() {
    // 不用返回Redirect，直接渲染搜索表单即可
    return (
      <form onSubmit={this.handleSearch}>
        <input
          type="text"
          value={this.state.q}
          onChange={(e) => this.setState({ q: e.target.value })}
        />
        <button type="submit">搜索</button>
      </form>
    );
  }
}

export default withRouter(Search);

函数组件实现方式： #

用useHistory钩子直接获取history对象：

import { useHistory } from 'react-router-dom';
import { useState } from 'react';

function Search() {
  const history = useHistory();
  const [q, setQ] = useState('');
  const [isReady, setIsReady] = useState(false);

  const handleSearch = (e) => {
    e.preventDefault();
    if (isReady) {
      const queryString = `q=${encodeURIComponent(q)}`;
      history.push(`/search/hotels?${queryString}`);
      setIsReady(false);
    }
  };

  return (
    <form onSubmit={handleSearch}>
      <input
        type="text"
        value={q}
        onChange={(e) => setQ(e.target.value)}
        onClick={() => setIsReady(true)}
      />
      <button type="submit">搜索</button>
    </form>
  );
}

2. 处理搜索页组件的参数更新 #

因为复用同一组件，路由只变查询参数时组件不会重新挂载，所以需要监听location.search的变化来刷新数据：

类组件： #

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

class SearchResults extends Component {
  componentDidMount() {
    this.loadResults(this.props.location.search);
  }

  componentDidUpdate(prevProps) {
    // 查询参数变化时重新加载数据
    if (this.props.location.search !== prevProps.location.search) {
      this.loadResults(this.props.location.search);
    }
  }

  loadResults = (searchStr) => {
    const params = new URLSearchParams(searchStr);
    const query = params.get('q');
    // 调用API获取对应查询的结果
    console.log(`加载搜索结果：${query}`);
  };

  render() {
    return <div>搜索结果展示区域</div>;
  }
}

export default withRouter(SearchResults);

函数组件： #

用useEffect监听location.search：

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

function SearchResults() {
  const location = useLocation();

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const query = params.get('q');
    // 调用API加载结果
    console.log(`加载搜索结果：${query}`);
  }, [location.search]);

  return <div>搜索结果展示区域</div>;
}

方案优势 #

• history.push直接在浏览器历史栈添加新记录，完美支持返回按钮回到之前的查询状态；
• 监听location.search变化，确保查询参数更新时组件同步刷新数据，复用组件的同时保证内容正确；
• 避开了<Redirect>的同路由校验逻辑，从根源上解决了报错问题。

内容的提问来源于stack exchange，提问作者prolific