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事件处理程序的元素（父级或祖父级或祖父级父级...）内，并且该处理程序调用{{1} }。这会导致事件停止冒泡到由FlowRouter添加的文档点击事件处理程序，后者负责为您更改路线。因此，执行浏览器.stopPropagation()标记时的正常行为，即更改路径并重新加载页面。

要解决此问题，您可以尝试删除<a>。如果由于某些原因你不能，你可以自己拨打.stopPropagation()和e.preventDefault()。

如果您对它的工作原理感兴趣，可以参考以下信息：

要更改路线而不重新加载页面，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

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

1 个答案: