0

我现在已经在我的 SPA 应用程序中设置了这个路由

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

如何通过 remix 文件结构路由实现相同的结果？

4

1 回答 1

1

据我了解，您有一个 Landing 组件，它是一个布局（所以我想您呈现一个 Outlet？）和一个 FormLayout，当用户位于时，它在 Landing 布局内呈现/，然后对于您重定向到的任何其他路线/，那就是正确的？

假设这是正确的，您将不得不这样做：

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

那routes/__landing.tsx东西被称为无路径布局路由，它是一个不会将段添加到 URL 的布局路由，因此最终 URL 将是/而不是/__landing. 在此文件中，您应该渲染<Outlet />嵌套路由的渲染位置。

/routes/__landing/index.tsx是 中的嵌套路由，该routes/__landing.tsx路由的组件将在父级放置<Outlet />. 所有index文件都与 URL 匹配/。

这routes/$.tsx是一个splat 路由（或包罗万象的路由），它将匹配所有其他 URL，您可以在其中放置这样的重定向：

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

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

但我建议您不要将所有路由重定向到/，而是使用正确的 404 状态代码呈现未找到的页面。您可以将错误页面放在CatchBoundary或ErrorBoundaryroot.tsx导出的文件中。

于 2022-01-14T17:16:06.037 回答