React Router v4-重定向到具有不同查询参数的相同路由

Question

场景：

有一个主页，搜索用户从该主页被重定向到带有查询参数的搜索页面（例如q = abc）。现在在搜索页面上，用户再次尝试搜索其他值，因此他再次被重定向到相同的搜索页面，但是具有不同的查询参数（例如q = xyz）

问题：

当我尝试再次执行从搜索重定向页面到具有不同查询参数的相同路由时，出现错误“您试图重定向到当前正在使用的相同路由”。

预期结果：

应该使用不同的查询参数再次将用户重定向到相同的路由，以便在按“后退”按钮时，他可以返回上一个查询，就像以前不是SPA一样。结果应该类似于我使用相同的组件将用户从/ search / abc重定向到/ search / xyz的情况。

可能的解决方案：

提交搜索查询后，我可以检查它是否是相同的路由，并基于此路由可以以某种方式重定向或更新组件状态。该解决方案的问题在于，用户在单击浏览器的“后退”按钮时无法返回上一个查询。我希望将页面添加到历史记录中。

代码段：

使用以下代码在主页和搜索页面上都存在的搜索组件内部的渲染函数中进行重定向

if (this.state.isReady) {
        let queryString = "q=" + this.state.q;
        return (
            <Redirect push to={`/search/hotels?${queryString}`} />
        );
    }

我认为这对任何具有搜索功能的网站都是一个普遍的问题，因此应该有一种优雅的方式来处理这种情况，但我无法考虑。

Answer 1

找到一个解决方案：

而不是使用<Redirect />来自阵营路由器，我用历史的API来推动新的路线。

this.props.history.push(`/search/hotels?${queryString}`);

我将我的SearchComponent包裹在具有React-Router提供的HOC的Router中，然后使用了历史API。

代码段：

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

class SearchComponent {

    // Component Code goes here

    onSubmit(){
        let queryString = "q=" + this.state.q;
        this.props.history.push(`/search/hotels?${queryString}`);
    }
}

export default withRouter(SearchComponent)