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

Question

我认为在锚标记上使用 Link 是一种惯例。根据我的理解，Link标签会被翻译成锚标签变成html。但是，根据我的观察，Link 将在客户端呈现页面，并且 cache 页面，锚标记 将在服务器端呈现页面。

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

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

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

我明白锚点是做什么的，但我不明白为什么Link中的锚点是客户端渲染。这是预期的行为吗？另外，如果我没看错的话，Link 是怎么知道怎么缓存数据的。

非常感谢

Answer 1

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

HTML5 历史允许我们在 front-end 路由中使用漂亮的 URLs 而不是基于旧式散列的 URLs，即 /page /#page 个。从这个意义上说，React Router 只不过是 HTML5 历史的包装器。

使用 HTML5 历史记录时，请务必确保后端已配置为在您的所有路由中提供页面。例如您可以从 / 到 /cart 进行 front-end 转换，但是如果您随后重新加载页面，如果您的服务器尚未配置为服务端点 /cart。这对于不支持 HTML5 历史的旧浏览器（例如 IE9）也很重要，它将优雅地降级为传统的 HTTP 请求。

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

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

The different behavior between Link and Anchor tag in React-router

javascript

reactjs

react-router