React Router 和任意查询参数:页面在加载时意外刷新? [英] React Router and Arbitrary Query Params: Page Refreshes Unintentionally on Load?

问题描述

过去几周我一直在使用 React Router 并取得了巨大成功，但我遇到了一个似乎找不到解决方案的问题.每当将任意查询参数附加到 url 时(在我们的例子中，用于从电子邮件进行 URL 跟踪)，您登陆的页面将加载，然后自动刷新而不会发出警告.

鉴于最基本的路线设置:

var routes = (<路由处理程序={ResultsController}><DefaultRoute handler={Results}/></路线>);

还有一个默认处理程序:

Router.run(routes, function (Handler, state) {React.render(<Handler params={state.params}/>, domElement);});

如果我导航到 http://whatever.com/results 一切正常，但是如果我导航到 http://whatever.com/results?ref=track 页面将刷新并重定向回 http://whatever.com/results#/.请注意，在散列和斜杠之后添加 queryParams 会导致正确的行为；问题是，这些链接中有许多是在服务器端生成的，不希望以这种方式强制散列.

我是否需要为 queryParams 设置通配符处理程序?任何指向文档的指针也会有所帮助.

虽然这不能解决导致无意刷新的首要问题/错误，但我发现使用 Router.HistoryLocation PushState 选项加载路由允许 queryParams 预渲染:

Router.run(routes, Router.HistoryLocation, function (Handler, state) {React.render(<Handler params={state.params} query={state.query}/>, domElement);});

谢谢！

解决方案

这里的问题是您使用的是 Router.HashLocation，如果您没有指定，则为默认位置.

<代码>Router.run(routes, Router.HistoryLocation, function(...

将解决问题，但您需要一个可以处理它的服务器.

如果您仍然需要哈希位置，请将您的查询放在# 之后.就 HashLocation 而言，# 之前的查询不是它理解的位置的一部分.

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. 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.

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#/. Please note that appending queryParams after the hash and slash results in correct behavior; 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? 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.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.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.

这篇关于React Router 和任意查询参数:页面在加载时意外刷新?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！