React 路由器和任意查询参数：加载时页面无意刷新？答案

【问题标题】：React Router and Arbitrary Query Params: Page Refreshes Unintentionally on Load?React 路由器和任意查询参数：加载时页面无意刷新？
【发布时间】：2015-05-11 05:22:40
【问题描述】：

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

鉴于最基本的路线设置：

var routes = (
  <Route handler={ResultsController}>
     <DefaultRoute handler={Results} />
  </Route>
);

还有一个默认处理程序：

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);
});

谢谢！

【问题讨论】：

标签： javascript reactjs query-parameters react-router

【解决方案1】：

这里的问题是你使用Router.HashLocation，如果你不指定一个默认位置。

Router.run(routes, Router.HistoryLocation, function(...

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

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

【讨论】：

谢谢；这足以回答我的问题。