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/