reactjs - 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 />从React Router，我使用history api来推送新路由。

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

我将 SearchComponent 包装在 withRouter 中，它是 React-Router 提供的 HOC，然后使用历史记录 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)