javascript - React-router 在transitionTo 上意外重新加载(Chrome)

Question

在 React 和 React Router 之上实现的(单页)应用程序中，我们在使用 router.transitionTo 方法时观察到一种奇怪的模式。

对于过于冗长的上下文表示歉意，但不想错过相关的内容。

假设我们有以下路由器初始化，它是从应用程序的单个“物理”页面调用的:

define([], function () {
    var _Root = React.createClass({
            render : function () {
                return React.createElement(React.addons.CSSTransitionGroup, {/**/},
                React.createElement(Router.RouteHandler, {/**/}));
            }
        });
    var _NotFoundScreen = React.createClass({/**/});
    var _NoDefaultScreen = React.createClass({/**/});
    var routes = (
        React.createElement(Router.Route, {
            handler : _Root,
            path : "/SampleApplication/"
        },
        React.createElement(Router.Route, {
            path : "Transfer",
            handler : Transfer
        }),
        React.createElement(Router.Route, {
            path : "Home",
            handler : Home
        }),
        React.createElement(Router.DefaultRoute, {
            handler : Home || _NoDefaultScreen
        }),
        React.createElement(Router.NotFoundRoute, {
            handler : _NotFoundScreen
        })));
    return {
        init : function () {
            var router = Router.create({
                routes : routes,
                location : Router.HistoryLocation
            });
            router.run(function (rootClass, state) {
                if (state.routes.length === 0) {
                    window.location = state.path;
                }
                React.render(React.createElement(rootClass, state), document.getElementById("reactContainer"));
            });
        }
    }
});

然后我们有“转移”页面，其中包含以下内容:

define([], function () {
    var View = (function (_super) {
        /*(...)*/
        function View() {
            /*(...)*/
        }
        View.prototype.render = function () {
            /*(...)*/
            return React.DOM.div(null, React.createElement(Button.Button, {
                    enabled : true,
                    onClick : function () {
                        router.transitionTo("/SampleApplication/Home");
                    },
                    style : "btn",
                    visible : true
                }, "B1"), React.DOM.br(), "form:", React.createElement(Form.Form, {
                    style : "form",
                    visible : true
                }, React.createElement(Button.Button, {
                        enabled : true,
                        onClick : function () {
                            router.transitionTo("/SampleApplication/Home");
                        },
                        style : "btn btn-primary",
                        visible : true
                    }, "B2")));
        };
        return View;
    })(/*(...)*/);
    return View;
});

因此，我们在转账页面上有 2 个按钮 - B1 和 B2。 B2 由“form”元素包裹。单击时，这两个按钮都能够“导航”到主页。

B1 导航按预期工作。

通过B2导航揭示了一些奇怪的行为。

• 浏览器网址:host/SampleApplication/Transfer
• 我们点击 B2
• 我们“导航”到 host/SampleApplication/Home 并在几分之一秒内查看页面内容
• 几分之一秒后，浏览器 URL 更改为 host/SampleApplication/Home？
• 我们看到白屏(就好像我们第一次加载/访问应用程序并且它正在初始化)
• 我们得到渲染的页面@host/SampleApplication/Home？

我已经尝试找到问题一段时间了，但似乎没有任何调试结果。

B1 和 B2 的导航执行流程是相同的(直到 React Router 调用 location.push(path) 为止)。

此外，这种情况“仅”发生在 Chrome(桌面版和移动版)、Opera(移动版)和 Android 原生浏览器上，而对于 Firefox(桌面版和移动版)，B1 和 B2 都能够从一个页面导航到另一个页面，无需任何操作。额外的重新加载也不会“离开”应用程序的单个物理页面。

我无法找到任何有关类似行为模式的相关信息来解释可能发生的情况。

如果有人能够提供一些关于这里可能发生的事情的见解，我们将不胜感激。

致以诚挚的问候，

SYG

Answer 1

好的，问题的根源被确定为按钮元素的默认类型 - 提交(link HTML 推荐)。

由于按钮是在表单元素内呈现的，因此按钮的“onClick”会隐式提交表单，导致页面重新加载排队。按钮的“onClick”执行 router.transitionTo，有效地导航到目标页面，然后立即执行从表单提交的“排队”页面重新加载，导致应用程序重新初始化。

通过将按钮元素的类型更改为按钮，该行为已“修复”。