使用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() 。 這將導致事件停止冒泡，直至由FlowRouter添加的文檔單擊事件處理程序 ，該事件處理程序負責為您更改路線。 因此，當單擊瀏覽器的<a>標記時，將執行正常的行為，即更改路由並重新加載頁面。

要解決此問題，您可以嘗試刪除該.stopPropagation() 。 如果由於某些原因而無法執行操作，則可以自己調用e.preventDefault()和FlowRouter.go 。

如果您對它的工作方式感興趣，請參考以下更多信息：

• 要更改路由而不重新加載頁面，FlowRouter使用History API
• 實際上，FlowRouter並不直接使用History API ，而是通過名為page.js的NPM模塊使用
• 初始化時，page.js負責在文檔上添加click事件，以更改單擊<a>標記的正常行為