Как типизировать React Router Dom?

Question

[bogdaryan]

Сегодня дедлайн. Как мне типизировать эту телегу ? Я не понимаю. Я уже что только не пытался

import { createBrowserRouter } from "react-router-dom";

import {
  OnlyAuth,
  OnlyUnAuth,
} from "../components/protected-route/ProtectedRoute";

import App from "../components/app/app";

import {
  Home,
  Register,
  Login,
  ForgotPassword,
  ResetPassword,
  NotFound404,
  Profile,
  Feed,
  ProfileOrders,
  OrderComposition,
} from "../pages";

import UserInfo from "../components/user-info/user-info";

import Modal from "../components/modal/modal";
import OrderDetails from "../components/order-details/order-details";
import IngredientDetails from "../components/ingredient-details/ingredient-details";

export const router = createBrowserRouter([
  {
    path: "",
    element: <App />,
    children: [
      {
        path: "/",
        element: <Home />,
        children: [
          {
            path: "order/:number",
            element: (
              <Modal>
                <OrderDetails />
              </Modal>
            ),
          },
          {
            path: "ingredients/:id",
            element: (
              <Modal>
                <IngredientDetails />
              </Modal>
            ),
          },
        ],
      },
      {
        path: "/login",
        element: <OnlyUnAuth component={<Login />} />,
      },
      {
        path: "/register",
        element: <OnlyUnAuth component={<Register />} />,
      },
      {
        path: "/forgot-password",
        element: <OnlyUnAuth component={<ForgotPassword />} />,
      },
      {
        path: "/reset-password",
        element: <OnlyUnAuth component={<ResetPassword />} />,
      },
      {
        path: "/profile",
        element: <OnlyAuth component={<Profile />} />,
        children: [
          {
            path: "/profile",
            element: <UserInfo />,
          },
          {
            path: "/profile/orders",
            element: <ProfileOrders />,
            children: [
              {
                path: "/profile/orders/:id",
                element: (
                  <Modal>
                    <OrderComposition />
                  </Modal>
                ),
              },
            ],
          },
        ],
      },
      {
        path: "/feed",
        element: <Feed />,
        children: [
          {
            path: ":number",
            element: (
              <Modal>
                <OrderComposition />
              </Modal>
            ),
          },
        ],
      },
    ],
  },
  {
    path: "*",
    element: <NotFound404 />,
  },
]);

Comments

[WbICHA]

Сегодня дедлайн.

Поздравляю, ты не вложился в него.

[WbICHA]

Как мне типизировать эту телегу ?

Что в данном случае подразумевается под "типизировать"? Полноценно это типизировать нетривиальная задача так-то. Тем более полноценная типизация подразумевает под собой типизацию ссылок для навигации по сайту, а без этого непонятно что именно типизировать надо.

Answer 1

[Антон Иванов]

Если речь про роуты - тип `RouteObject` вам в помощь.
https://reactrouter.com/en/main/route/route#type-d...

Answer 2

[bogdaryan]

Я в тильте уже был и не понимал, что я делаю
Мне нужно было просто переименовать в .tsx, а я менял на .ts