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

Posted 2023-02-22

【中文标题】react-router 不维护查询参数，调用 onEnter 两次

【英文标题】：react-router does not maintain query params and calls onEnter twice

【发布时间】：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

【参考方案1】：

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

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