React Router和Arbitrary Query Params:页面在加载时意外刷新?

时间:2015-03-09 21:51:54

标签: javascript reactjs query-parameters react-router

过去几周我一直在使用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);
});

谢谢!

1 个答案:

答案 0 :(得分:3)

此处的问题是,您使用Router.HashLocation,默认位置,如果您没有指定。{/ p>

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

将解决问题,但您需要一台可以处理它的服务器。

如果您仍想要哈希位置,请在 #之后输入您的查询。就HashLocation而言,#之前的查询不属于其理解的位置。