Маршруты и модули маршрутов

Маршрут связывает адрес страницы с файлом, который её описывает. В режиме фреймворка все маршруты перечислены в одном файле app/routes.ts, а каждый файл страницы называется модулем маршрута (route module).

Файл routes.ts

В новом проекте он уже есть и содержит один маршрут:

// app/routes.ts
import { type RouteConfig, index } from "@react-router/dev/routes";
 
export default [index("routes/home.tsx")] satisfies RouteConfig;

index задаёт страницу для корневого адреса /. Путь к файлу указывается относительно папки app/.

Новая страница

Добавьте страницу «О блоге». Сначала создайте файл app/routes/about.tsx:

// app/routes/about.tsx
export default function About() {
  return <h1>О блоге</h1>;
}

Затем зарегистрируйте его функцией route(адрес, файл):

// app/routes.ts
import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
export default [
  index("routes/home.tsx"),
  route("about", "routes/about.tsx"),
] satisfies RouteConfig;

Откройте http://localhost:5173/about — появится заголовок «О блоге». Адрес пишут без начального слеша. Сам файл без записи в routes.ts ничего не делает: имя файла на адрес не влияет.

Что экспортирует модуль

Модуль маршрута — обычный файл TypeScript, у которого некоторые экспорты имеют особый смысл:

Каждый из них разобран в отдельном уроке. Пока достаточно компонента по умолчанию.

Сгенерированные типы

Для каждого модуля фреймворк создаёт файл типов. Их импортируют из соседней «папки» ./+types/имя-файла:

// app/routes/about.tsx
import type { Route } from "./+types/about";
 
export default function About(_props: Route.ComponentProps) {
  return <h1>О блоге</h1>;
}

Тип Route.ComponentProps описывает пропсы страницы: позже в нём появятся loaderData и params с точными типами. Типы обновляются сами, пока работает npm run dev; вручную их создаёт команда npx react-router typegen.

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

Редактор подчёркивает строку import type { Route } from "./+types/about" — «модуль не найден». Папка +types реально лежит в .react-router/types, и появляется она только после запуска npm run dev или npx react-router typegen. Запустите одну из команд и, если нужно, перезапустите TypeScript в редакторе.