在transitionTo（Chrome）上意外加载React-Router

Question

In a (single-page) application implemented on top of React and React Router, we are observing a strange pattern when using the router.transitionTo method.

Apologies for the extra verbose context, but don't want to miss something pertinent.

Let's assume that we have the following Router initialization, which is called from the single "physical" page of the application:

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"));
            });
        }
    }
});

And then we have the "Transfer" page with something along the lines of:

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;
});

So, we have 2 buttons on the Transfer page - B1 and B2. B2 is wrapped by a "form" element. Both buttons are capable of "navigating" to the home page, when clicked.

Navigation through B1 works as expected.

Navigation through B2 reveals some peculiar behavior.

• browser url: host/SampleApplication/Transfer
• we click B2
• we "navigate" to host/SampleApplication/Home and see the page content for a fraction of a second
• fraction of a second later, browser url changes to host/SampleApplication/Home?
• we get a white screen (as if we're loading/accessing the application for the first time and it is initializing)
• we get the rendered page @ host/SampleApplication/Home?

I have been trying to find the issue for a while now and no amount of debugging seems to be producing any results.

The execution flows for the navigation from both B1 and B2 are identical (down to the point where the React Router calls location.push(path)).

Furthermore, this "only" happens with Chrome (desktop and mobile), Opera (mobile) and Android stock browser, while for Firefox (desktop and mobile) both B1 and B2 are able to navigate from one page to another without any extra reloads nor "leaving" the single physical page of the application.

I have been unable to find any pertinent information about similar behavior patterns that could explain what could be going on.

If anyone could provide some insight on what could be happening here, it would be most appreciated.

With best regards,

SYG

Answer 1

Ok, the source of the problem was identified as being the default type of button element - submit ( link to the HTML recommendation).

Since the button was being rendered within a form element, the "onClick" of the button was implicitly submitting the form, causing a page reload to get queued. The "onClick" of the button executes router.transitionTo, effectively navigating to the target page and the "queued" page reload from the form submit gets executed immediately afterwards, causing the application to re-initialize.

The behavior was "fixed" by changing the type of the button element to button .