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

Question

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

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

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

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

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

提前谢谢了

Answer 1

我不确定你到底在问什么。 我认为您要问的是为什么浏览器中的URL更改而没有生成新的HTTP请求。 原因是HTML5历史记录。

HTML5历史记录使我们可以在前端路由中使用漂亮的URL，而不是基于旧式哈希的URL，即/page代替/#page 。 从这个意义上讲，React Router只不过是HTML5历史的包装。

使用HTML5历史记录时，请务必将后端配置为在您的所有路线上提供页面。 例如，您可以从/到/cart进行前端转换，但是如果您没有重新配置页面以服务于端点/cart ，则如果重新加载页面，则会收到服务器错误。 这对于不支持HTML5历史记录的较旧的浏览器（例如IE9）也很重要，该浏览器可以正常降级为传统的HTTP请求。

有关HTML5历史记录的更多信息，请参阅始终可读的CSS技巧。 https://css-tricks.com/using-the-html5-history-api/