Реактивный маршрутизатор непреднамеренно перезагружается при переходеTo (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")); 
      }); 
     } 
    } 
}); 

И тогда у нас есть «Transfer» страница с чем-то вдоль линий :

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 кнопки на Transfer страницы - B1 и B2. B2 обертывается элементом «формы». При нажатии кнопки обе кнопки могут перемещаться по главной странице.

Навигация по B1 работает должным образом.

Навигация по B2 показывает некоторые особенности поведения.

• браузера URL: хост/SampleApplication/Transfer
• щелкает B2
• мы "перемещаться" для размещения/SampleApplication/Дома и увидеть содержимое страницы на долю второго
• фракции второй позже URL-адрес браузера изменится на host/SampleApplication/Home?
• мы получаем белый экран (как будто мы загружаем/получаем доступ к приложению в первый раз и инициализируемся)
• мы получаем отображаемую страницу @ host/SampleApplication/Home?

Я пытался найти проблему какое-то время, и никакая отладка, кажется, не дает никаких результатов.

Потоки выполнения для навигации с обоих B1 и B2 идентичны (вплоть до точки, где React Router вызывает location.push (путь)).

Кроме того, это «единственное» происходит с Chrome (настольным и мобильным), браузером Opera (для мобильных устройств) и Android, в то время как для Firefox (настольного и мобильного) оба B1 и B2 могут перемещаться с одной страницы на другую без любые дополнительные перезагрузки или «оставление» отдельной физической страницы приложения.

Мне не удалось найти какую-либо информацию о похожих поведенческих шаблонах, которые могли бы объяснить, что может происходить.

Если кто-то мог бы дать некоторое представление о том, что может происходить здесь, это было бы очень признательно.

С наилучшими пожеланиями,

SYG

Answer 1

Ok, источник проблемы был идентифицирован как тип по умолчанию из кнопочного элемента - представить (link в HTML рекомендации).

Поскольку кнопка была визуализирована в элементе формы, кнопка «onClick» была неявно отправлена ​​в форму, в результате чего перезагрузка страницы была поставлена ​​в очередь. «OnClick» кнопки выполняет router.transitionTo, эффективно перемещаясь на целевую страницу, а перезагрузка страницы «в очереди» из формы submit запускается сразу же после этого, заставляя приложение повторно инициализировать.

Поведение было «исправлено», изменив тип элемента кнопки на кнопку.