Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
Релиз 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/
31 · 3.8K ·