как сделать аналогичную маршрутизацию, например, с реактивным маршрутизатором

Question

Я настроил эту маршрутизацию прямо сейчас в своем приложении SPA.

      export const routes: RouteObject[] = [
  {
    index: true,
    element: <Landing />,
  },
  {
    path: '/',
    element: <FormLayout />,
    children: [/* ... */],
  },
  { path: '*', element: <Navigate to="/" /> },
];

как добиться того же результата с маршрутизацией файловой структуры ремикса?

Answer 1

Насколько я понял, у вас есть компонент Landing, который представляет собой макет (поэтому я полагаю, вы визуализируете Outlet?) и FormLayout, который отображается внутри макета Landing, когда пользователь находится в , а затем для любого другого маршрута, который вы перенаправляете на , это правильный?

Предположим, что это правильно, вам нужно будет сделать это следующим образом:

      routes/__landing.tsx
routes/__landing/index.tsx
routes/$.tsx

Эта вещь называется Pathless Layout Route , который представляет собой маршрут макета, который не добавляет сегменты к URL-адресу, поэтому конечный URL-адрес будет, а не /__landing. Внутри этого файла вы должны визуализировать место, где будут отображаться вложенные маршруты.

The /routes/__landing/index.tsxэто вложенный маршрут внутри routes/__landing.tsx, компонент этого маршрута будет отображаться там, где родитель поместил <Outlet />. Все indexфайлы соответствуют URL-адресам.

The routes/$.tsxэто splat -маршрут (или универсальный маршрут), который будет соответствовать любому другому URL-адресу, вы можете поместить перенаправление следующим образом:

      import type { LoaderFunction } from "remix";
import { redirect } from "remix";

export loader: LoaderFunction = async () => {
  return redirect("/");
}

Но я рекомендую вам не перенаправлять все маршруты на /и вместо этого отображать не найденную страницу с правильным кодом состояния 404. Вы можете поместить страницы ошибок внутри root.tsxэкспортирует файл CatchBoundary или ErrorBoundary .