React Router 和任意查询参数:页面在加载时意外刷新?

IT技术 javascript reactjs query-parameters react-router
2021-05-09 20:52:32

过去几周我一直在使用 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个回答

这里的问题是您正在使用Router.HashLocation,如果您没有指定默认位置。

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

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

如果你仍然想哈希的位置,把你的查询#就其HashLocation而言, 之前的查询#不是它理解的位置的一部分。