typescript 如何使用react-router执行类似的路由

axr492tv  于 2022-11-18  发布在  TypeScript
关注(0)|答案(1)|浏览(176)

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

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

如何使用混合文件结构路由实现相同的结果?

x4shl7ld

x4shl7ld1#

据我所知,您有一个Landing组件,它是一个布局(因此,我假设您渲染了一个Outlet?)和一个FormLayout,当用户位于/时,它在Landing布局内渲染,然后对于任何其他路径,您重定向到/,对吗?
假设这是正确的,你必须这样做:

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

这个routes/__landing.tsx叫做Pathless Layout Route,它是一个不会向URL添加段的布局路径,因此最终的URL将是/而不是/__landing。在这个文件中,您应该呈现一个<Outlet />,其中嵌套的路径将被呈现。
/routes/__landing/index.tsxroutes/__landing.tsx内部的嵌套路径,该路径的组件将在父路径放置<Outlet />的位置呈现。所有index文件都与URL /匹配。
routes/$.tsx是一个splat路由(或catch-all路由),它将匹配每个其他URL,在那里你可以放一个重定向如下:

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

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

但是我建议你不要把所有的路由都重定向到/,而是用正确的404状态代码呈现一个未找到的页面。你可以把错误页面放在root.tsx文件CatchBoundary或ErrorBoundary导出中。

相关问题