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

找到解决方案：

我没有使用React Router中的<Redirect />，而是使用历史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)

Answer 2

嘿，您可以使用对象表示法代替字符串文字，并传递包含要重定向到示例的新路径名的位置对象


const Topic = ({ location }) => (
   <Redirect to={{ ...location, pathname: '/topics?user=prolific' }} />
)

因此，使用散布运算符，可以保留以前的location属性，然后可以将pathName更改为所需的路径名。

或

您可以在将其传递给重定向组件之前，仅格式化新路由的查询并在路由名称前添加该名称。例如


const Topic = ({ location }) => {
   const userQuery = 'user=prolific&title=The Long Night';
   const newRoute = `topics?${userQuery}`

   return <Redirect to={newRoute} />
}

希望有帮助

Answer 3

Ebis的回答对我来说无法正常工作。将查询字符串直接添加到pathname时，反应路由器尝试匹配路径，导致在使用Redirect组件时未找到路由。

一种解决方法是在查询字符串之前添加/，如下所示：

<Redirect to={{ pathname: `/search/hotels/?${queryString}` }} />

但是，这似乎不正确。相反，我仅将路径添加到pathname，并将查询字符串添加到search键，如下所示：

<Redirect to={{ pathname: '/search/hotels', search: `?${queryString}` }} />

Answer 4

我找到的最简单的解决方案就是使用 location.search 道具：

<Redirect from="/color-profile/quiz" to={`/quiz?${props.location.search}`} exact />

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

4 个答案: