Различное поведение между тегом Link и Anchor в React-router

Question

Я думаю, что это соглашение использовать тег Link over Anchor. По моему мнению, тег Link будет переведен в тег привязки в html. Однако из моего наблюдения Ссылка будет отображать страницу на стороне клиента, а также кэш страница, Якорный тег отобразит страницу на стороне сервера.

Вот код, у меня есть один компонент, который имеет метод willTransitionTo

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

Когда у меня есть еще один компонент, чтобы связать этот компонент, если я использую ссылку из среагировать-маршрутизатор, журнал будет печататься в консоли браузера. Интересно то, что во второй раз, когда я ссылаюсь на эту страницу, она кэшировала данные (никаких данных из сети не было). С другой стороны, журнал будет напечатан на боковой панели сервера, если я использую привязку.

Я понимаю, что делает якорь, но я не понимаю, почему привязка в Link является рендерингом на стороне клиента. Это ожидаемое поведение? Кроме того, как Link знает, как кэшировать данные, если я неправильно понимаю.

Большое спасибо заранее

Answer 1

Я не уверен, что именно вы просите. Я думаю, что вы спрашиваете, почему URL-адрес в браузере изменяется без создания нового HTTP-запроса. Причина - история HTML5.

История HTML5 позволяет нам иметь хорошие URL-адреса в интерфейсной маршрутизации вместо старых URL-адресов хеш-стиля, то есть /page вместо /#page. В этом смысле React Router - не что иное, как обертка вокруг истории HTML5.

При использовании истории HTML5 важно убедиться, что на задней панели настроено обслуживание страниц на всех ваших маршрутах. например У вас может быть переход на передний план от / до /cart, но если вы затем перезагрузите страницу, вы получите ошибку сервера, если ваш сервер не настроен для обслуживания конечной точки /cart. Это также важно для старых браузеров (например, IE9), которые не поддерживают историю HTML5, которая изящно деградирует к традиционным HTTP-запросам.

Подробнее о HTML5-истории есть всегда читаемые CSS-трюки. https://css-tricks.com/using-the-html5-history-api/