如何使用 react-router 进行类似的路由答案

【问题标题】：how to do similar routing like with react-router如何使用 react-router 进行类似的路由
【发布时间】：2022-11-12 14:34:57
【问题描述】：

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

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

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

【问题讨论】：

标签： typescript remix.run

【解决方案1】：

据我了解，您有一个 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.tsx 是routes/__landing.tsx 内的嵌套路由，该路由的组件将在父放置<Outlet /> 的位置呈现。所有 index 文件都与 URL / 匹配。

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

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

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

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

【讨论】：