Ссылки и навигация

Чтобы переходить между страницами без полной перезагрузки, вместо тега a используют компоненты из react-router. Фреймворк при этом сам загружает данные новой страницы и подставляет её в макет. Сами компоненты те же, что в режиме библиотеки, но здесь у них есть пара дополнительных возможностей.

Link

Добавьте меню в макет app/routes/layout.tsx:

// app/routes/layout.tsx
import { Link, Outlet } from "react-router";
 
export default function Layout() {
  return (
    <>
      <header>
        <Link to="/">Статьи</Link> <Link to="/about">О блоге</Link>
      </header>
      <main>
        <Outlet />
      </main>
    </>
  );
}

Щелчок по «О блоге» меняет адрес на /about и показывает страницу, а шапка остаётся на месте. В HTML это обычная ссылка a href, поэтому она работает даже до загрузки JavaScript.

NavLink

NavLink — ссылка, которая знает, активна ли она. В className можно передать функцию:

// app/routes/layout.tsx
import { NavLink } from "react-router";
 
<NavLink to="/about" className={({ isActive }) => (isActive ? "active" : "")}>
  О блоге
</NavLink>

Пока открыт адрес /about, ссылка получает класс active, и её можно выделить стилями. Без функции NavLink тоже добавляет класс active сам. Для ссылки на / добавьте проп end, иначе она будет активной на любой странице.

Предзагрузка

В режиме фреймворка ссылка может заранее загрузить код и данные страницы:

// app/routes/home.tsx
<Link to="/about" prefetch="intent">О блоге</Link>

С intent переход по ссылке выглядит мгновенным: пока пользователь подводил курсор, данные уже пришли.

useNavigate

Иногда переход нужен из кода — например, по кнопке «Назад» или по таймеру:

// app/routes/about.tsx
import { useNavigate } from "react-router";
 
export default function About() {
  const navigate = useNavigate();
 
  return (
    <>
      <h1>О блоге</h1>
      <button onClick={() => navigate(-1)}>Назад</button>
      <button onClick={() => navigate("/")}>На главную</button>
    </>
  );
}

navigate(-1) возвращает на предыдущую страницу истории, navigate("/") открывает главную.

Частая ошибка

useNavigate используют для перенаправления после отправки формы или после проверки, вошёл ли пользователь. В режиме фреймворка это делают на сервере: action или loader возвращает redirect("/...") (об этом — в уроках про действия и авторизацию). Для обычных переходов по щелчку выбирайте Link: он доступен поисковикам и работает, даже если JavaScript ещё не загрузился.