Question

我认为使用Link over Anchor标签是一种惯例。根据我的理解，Link标签将被转换为锚标签到html中。但是，根据我的观察，链接将在客户端呈现页面，并且缓存页面，锚标记将呈现页面服务器端。

这是代码，我有一个组件，它有方法willTransitionTo

willTransitionTo: function (transition, params, query, callback) {
      console.log('transition to');
    }

如果我有另一个组件链接此组件，如果我使用的是来自react-router的链接，则日志将在浏览器控制台中打印。有趣的是，当我链接到此页面时，它第二次缓存数据（没有从网络获取数据）。另一方面，如果我使用锚点，则日志将打印在服务器端控制台中。

我理解锚的作用，但我不明白为什么Link中的锚是客户端渲染。这是预期的行为吗？另外，如果我不误解，Link如何知道如何缓存数据。

非常感谢提前

Answer 1

我不确定你究竟在问什么。我想你所问的是为什么浏览器中的URL会在没有生成新HTTP请求的情况下发生变化。原因是HTML5历史。

HTML5历史记录允许我们在前端路由中使用不错的网址，而不是基于旧式哈希的网址，即/page而不是/#page。从这个意义上说，React Router只不过是HTML5历史的包装器。

使用HTML5历史记录时，务必确保后端配置为在所有路线上提供页面。例如您可以从/到/cart进行前端转换，但是如果您重新加载页面，如果您的服务器尚未配置为服务端点{{1}，则会出现服务器错误}}。这对于不支持HTML5历史记录的旧浏览器（例如IE9）也很重要，这些浏览器会优雅地降级为传统的HTTP请求。

有关HTML5历史的更多信息，总有可读的CSS技巧。 https://css-tricks.com/using-the-html5-history-api/

React-router中Link和Anchor标记之间的不同行为

1 个答案: