【问题标题】:react-router does not maintain query params and calls onEnter twicereact-router 不维护查询参数,调用 onEnter 两次
【发布时间】:2016-07-21 01:01:32
【问题描述】:

我有一个小应用程序,我希望用户能够在其中向 URL 添加令牌,以便可以共享这些 URL(类似于 use case。

为此,他们有一个表单,可以在其中提交这些凭据,然后使用this.context.router.push 导航到另一条路线。

此路由有一个 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

【问题讨论】:

    标签: reactjs react-router


    【解决方案1】:

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

    我责怪自己不习惯使用 React 本身并期望它以某种方式神奇地处理它。

    【讨论】:

      猜你喜欢
      • 2017-04-30
      • 2017-08-03
      • 2016-07-22
      • 1970-01-01
      • 2016-09-09
      • 2017-09-04
      • 2016-06-27
      • 2017-01-31
      • 2018-09-18
      相关资源
      最近更新 更多