使用 href 更改 FlowRouter 中的路由时页面重新加载

Question

我在 Meteor+React 应用程序中使用 FlowRouter 进行路由。我已经定义了一些这样的路线：

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 event on document to alter the normal behaviour of clicking on an <a> tag