React Router 和任意查询参数:页面在加载时无意中刷新?
React Router and Arbitrary Query Params: Page Refreshes Unintentionally on Load?
过去几周我一直在使用 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);
});
谢谢!
这里的问题是您使用的是 Router.HashLocation
,如果您不指定,则使用默认位置。
Router.run(routes, Router.HistoryLocation, function(...
将解决问题,但您需要一个可以处理它的服务器。
如果您仍然需要散列位置,请将您的查询放在 之后 #
。就 HashLocation
而言,#
之前的查询不是它理解的位置的一部分。
过去几周我一直在使用 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);
});
谢谢!
这里的问题是您使用的是 Router.HashLocation
,如果您不指定,则使用默认位置。
Router.run(routes, Router.HistoryLocation, function(...
将解决问题,但您需要一个可以处理它的服务器。
如果您仍然需要散列位置,请将您的查询放在 之后 #
。就 HashLocation
而言,#
之前的查询不是它理解的位置的一部分。