Заметки про React: “Релиз React Router v7 Вышел релиз React Router v7. В новой версии можн…”

Релиз React Router v7

Вышел релиз React Router v7. В новой версии можно использовать React Router в двух вариантах: как полноценный фулстек фреймворк (типа Remix) через Vite или как раньше, как библиотеку для роутинга. Также в новой версии появилась поддержка SSG, улучшилась настройка роутинга через конфиг и улучшена типизация. Поддержка RSC будет позже, когда React 19 и Vite Environment API будут готовы.

При апгрейде на 7 версию нет критических изменений, если уже на 6ой версии включили флаги 7ой версии. Эти флаги позволяют обновить приложение на 7ую версию по шагам. В 7ой версии пакет с названием react-router-dom больше не нужен, вместо него используйте пакет с названием react-router.

Пример файла роутера при использовании React Router как фреймворк:

 
// app/routes.ts 
import { 
  type RouteConfig, 
  route, 
} from "@react-router/dev/routes"; 
 
export default [ 
  route("teams/:teamId", "./team.tsx"), 
  // паттерн ^                 ^ файл модуля 
] satisfies RouteConfig;

Пример файла модуля:

 
// provides type safety/inference 
import type { Route } from "./+types/team"; 
 
// provides `loaderData` to the component 
export async function loader({ params }: Route.LoaderArgs) { 
  let team = await fetchTeam(params.teamId); 
  return { name: team.name }; 
} 
 
// renders after the loader is done 
export default function Component({ 
  loaderData, 
}: Route.ComponentProps) { 
  return <h1>{loaderData.name}</h1>; 
}

В файле модуля можно экспортировать функции:
- loader – для предзагрузки данных на сервере.
- clientLoader – для предзагрузки данных на клиенте.
- action – вызывается на сервере при отправке формы, useSubmit или useFetcher.
- clientAction – такой же как action, но вызывается на клиенте.
- headers – для установки HTTP заголовков ответа.

А также handle, links, meta, shouldRevalidate.

https://reactrouter.com/