Что делает <Link> и чем он отличается от обычного <a> тега?
Этот вопрос проверяет знание о навигации в React-приложениях
Короткий ответ
<Link> из React Router используется для навигации внутри React-приложения, предотвращая полную перезагрузку страницы. В отличие от <a>, который обновляет всю страницу, <Link> обновляет только нужные компоненты, сохраняя состояние приложения.
Длинный ответ
В React-приложениях <Link> заменяет стандартный тег <a> для внутренней навигации. Вот основные отличия:
Обновление страницы:
- <a> вызывает полную перезагрузку страницы, так как браузер обращается к серверу.
- <Link> позволяет React Router перехватывать переход и менять только контент, что делает навигацию мгновенной.
Сохранение состояния:
- При использовании <a> состояние React (например, данные в компонентах) сбрасывается.
- <Link> сохраняет состояние приложения, так как работает без перезагрузки.
Пример:
import { Link } from 'react-router-dom';
const Navigation = () => (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);В итоге, <Link> используется для создания плавной и быстрой навигации внутри Single Page Application (SPA).