react-router不维护查询参数并且调用onEnter两次

时间:2016-04-01 09:26:53

标签: reactjs react-router

我有一个小应用,我希望用户能够在网址中添加令牌,因此可以共享这些网址(类似于此use case

为了做到这一点,他们有一个表格,他们可以提交这些凭据,然后使用Request.ServerVariables["REMOTE_ADDR"]; 导航到另一条路线。

此路由具有onEnter处理程序,该处理程序将使用这些凭据初始化API客户端,进行异步调用以确保它们正常工作,然后存储该客户端的实例,以便后续不需要重新初始化onEnter电话。

在异步调用完成之前,会发生页面刷新,并且查询字符串参数将消失。这意味着再次调用onEnter,没有相同的查询字符串参数。

然而,在这里它变得有趣,如果我只是导航说http://localhost:9020/page?qsparam=paramvalue,则不会发生刷新并保持参数。

我创建了一个更简单的应用版本,其中包含了无关紧要的所有内容,但仍然可以解决问题。您可以在https://github.com/contentful/discovery-app-react/tree/react-router

找到它

重要的是: - 推送电话:https://github.com/contentful/discovery-app-react/blob/react-router/src/main.js#L11 - 路线声明https://github.com/contentful/discovery-app-react/blob/react-router/src/main.js#L39 - requireCredentials方法,用于onEnter处理程序https://github.com/contentful/discovery-app-react/blob/react-router/src/main.js#L47

1 个答案:

答案 0 :(得分:1)

好的,所以这有点荒谬和明显,但基本上问题在于我在表单处理程序上缺少event.preventDefault。

我责怪自己不习惯与React本身一起工作,并期待它以某种方式神奇地处理它。