React Router v4 - 使用不同的查询参数重定向到同一路由

IT技术 reactjs react-router
2021-04-29 17:11:03

设想：

有一个主页，从那里搜索用户被重定向到带有查询参数的搜索页面（例如 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}`} />
        );
    }

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

4个回答

找到解决方案：

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

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

我将 SearchComponent 包裹在 withRouter 中，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)

Ebis 的回答对我来说不起作用。直接在pathname.react router 中添加查询字符串时，尝试匹配路径，导致在使用Redirect组件时无法创建路由。

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

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

然而，这似乎不太对。相反，我只添加了 的路径pathname和search键的查询字符串，如下所示：

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

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


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

因此，使用扩展运算符，您可以保留位置的先前属性，然后您可以将 pathName 更改为您想要的。

或者

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


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

   return <Redirect to={newRoute} />
}

希望有帮助

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

<Redirect from="/color-profile/quiz" to={`/quiz?${props.location.search}`} exact />
其它你可能感兴趣的问题
上一篇Jest Snapshot 测试与单元测试？ 下一篇TypeScript - module '"*.svg"' 没有导出成员 'ReactComponent