Страница перезагружается при использовании href для изменения маршрута в FlowRouter

Question

Я использую FlowRouter для маршрутизации в моем приложении Meteor + React. Я определил некоторые маршруты, как это:

FlowRouter.route('/about', { 
    action:() => { 
     mount(MasterLayout, { 
      content: <AboutPage />, 
     }); 
    }, 
}); 


FlowRouter.route('/terms', { 
    action:() => { 
     mount(MasterLayout, { 
      content: <TermsPage />, 
     }); 
    }, 
}); 

Теперь, когда я нажимаю на ссылку, как <a href="/about">About</>, он перегружает всю страницу, а не только изменения содержания.

Кроме того, если я использую FlowRouter.go('/about'), он отлично работает и не перезагружает страницу, только меняя содержимое.

Пожалуйста, расскажите мне, что здесь происходит.

Answer 1

Там может быть более чем одна причина, чтобы это произошло, но это то, что я имею в виду:

Это потому, что ваш <a> тег, возможно, внутри элемента (родителя или прародителя или гранд-гранд родителей. ..), имеющий обработчик события click, и этот обработчик вызывает .stopPropagation(). Это приводит к тому, что событие прекращает пузыриться вверх до обработчик события click click, добавленный FlowRouter, который отвечает за изменение маршрута для вас. Поэтому обычное поведение при нажатии тега <a> выполняется браузером, который должен изменить маршрут и перезагрузить страницу.

Для того, чтобы исправить это, вы можете попытаться удалить это .stopPropagation(). Если вы не можете по каким-либо причинам, вы можете просто позвонить e.preventDefault() и FlowRouter.go.

Если вы заинтересованы в том, как она работает, вот еще немного информации, чтобы копаться в:

• Чтобы изменить маршрут без перезагрузки страницы FlowRouter использует History API
• На самом деле, FlowRouter не использует History API непосредственно, а через модуль НПМ по имени page.js
• Когда инициализировать page.js отвечает за добавление click event on document to alter the normal behaviour of clicking on an <a> tag