Создание проекта

Проект в режиме фреймворка создаётся официальным шаблоном. Он сразу настраивает Vite (сборщик и сервер разработки), TypeScript и серверную отрисовку, так что первую страницу можно открыть через минуту.

Создание

npx create-react-router@latest blog
cd blog
npm run dev

Мастер спросит, создать ли Git-репозиторий и установить ли зависимости, — ответьте «да». Команда npm run dev запускает сервер разработки, сайт открывается по адресу http://localhost:5173. Вы увидите приветственную страницу шаблона.

Структура проекта

blog/
├── app/
│   ├── routes/
│   │   └── home.tsx        страница «/»
│   ├── welcome/            компонент приветствия (можно удалить)
│   ├── app.css             общие стили
│   ├── root.tsx            корневой модуль: каркас HTML
│   └── routes.ts           список маршрутов
├── public/                 статические файлы: favicon, картинки
├── react-router.config.ts  настройки фреймворка
├── vite.config.ts          настройки Vite
├── tsconfig.json
└── package.json

Весь ваш код живёт в папке app/. После первого запуска появится скрытая папка .react-router/ со сгенерированными типами — её не редактируют и не добавляют в Git.

Корневой модуль

Файл app/root.tsx описывает общий HTML для всех страниц. Его основная часть:

// app/root.tsx
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
import "./app.css";
 
export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ru">
      <head>
        <meta charSet="utf-8" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}
 
export default function App() {
  return <Outlet />;
}

Meta и Links выводят теги заголовка и стилей страниц, Scripts подключает JavaScript, ScrollRestoration восстанавливает прокрутку при переходах. На месте Outlet появится текущая страница.

Скрипты

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

Удалив <Scripts /> из app/root.tsx (например, «почистив» файл), вы получите страницы, которые выглядят нормально, но не реагируют на клики: HTML пришёл с сервера, а JavaScript не загрузился. Компоненты Meta, Links, ScrollRestoration и Scripts в корневом модуле должны оставаться на месте.