[英]React Router and Arbitrary Query Params: Page Refreshes Unintentionally on Load?
I've been using React Router with great success the past few weeks, but I just ran into an issue that I can't seem to find a resolution for. 在过去的几周中,我一直在使用React Router取得巨大的成功,但是我遇到了一个似乎无法解决的问题。 Whenever an arbitrary query parameter is appended to a url (in our case, for URL tracking purposes from email) the page that you land on will load, then automatically refresh without warning. 每当将任意查询参数附加到url(在我们的示例中,出于电子邮件中的URL跟踪目的)时,您加载的页面都会加载,然后自动刷新而不会发出警告。
Given the most basic of route setups: 给出最基本的路由设置:
var routes = (
<Route handler={ResultsController}>
<DefaultRoute handler={Results} />
</Route>
);
And a default handler: 和默认处理程序:
Router.run(routes, function (Handler, state) {
React.render(<Handler params={state.params} />, domElement);
});
If I navigate to http://whatever.com/results
everything works as it should, but if I navigate to http://whatever.com/results?ref=track
the page will refresh and redirect back to http://whatever.com/results#/
. 如果我导航到http://whatever.com/results
一切正常,但是如果我导航到http://whatever.com/results?ref=track
则页面将刷新并重定向回http://whatever.com/results#/
。 Please note that appending queryParams after the hash and slash results in correct behavior; 请注意,在哈希和斜杠后附加queryParams会导致正确的行为; problem is, many of these links are generated server-side and forcing hashes in such a way is not desired. 问题是,其中许多链接都是在服务器端生成的,因此不希望以这种方式强制使用哈希。
Do I need to setup a wildcard handler for queryParams? 我是否需要为queryParams设置通配符处理程序? Any pointers to documentation would be helpful as well. 任何指向文档的指针也将有所帮助。
Edit: 编辑:
While this doesn't address the overarching question / bug leading to unintentional refreshes, I've found that loading the route using the Router.HistoryLocation PushState option allows for queryParams pre-render: 虽然这不能解决导致无意刷新的总体问题/错误,但我发现使用Router.HistoryLocation PushState选项加载路由可以允许queryParams预渲染:
Router.run(routes, Router.HistoryLocation, function (Handler, state) {
React.render(<Handler params={state.params} query={state.query} />, domElement);
});
Thanks! 谢谢!
The problem here is that you're using Router.HashLocation
, the default location if you don't specify one. 这里的问题是您使用的是Router.HashLocation
,如果您未指定默认位置,则为默认位置。
Router.run(routes, Router.HistoryLocation, function(...
Will fix the problem, but you'll need a server that can handle it. 将解决此问题,但您需要一个可以处理它的服务器。
If you still want hash location, put your query after the #
. 如果仍然需要哈希位置,请将查询放在#
后面 。 As far as HashLocation
is concerned, the query before the #
is not part of the location that it understands. 就HashLocation
而言, #
之前的查询不是它理解的位置的一部分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.