如何像 react-router 一样做类似的路由

Question

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

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

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

Answer 1

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

假设这是正确的，你必须这样做：

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 or ErrorBoundary exports.

如何像 react-router 一样做类似的路由

how to do similar routing like with react-router

remix

remix.run