如何在Remix中实现路由参数限制？（对比React Router实现）

Remix的文件系统路由不支持直接在动态参数里写正则规则，但可以通过动态路由+参数验证的方式实现和React Router一样的效果，比创建多个单独路由文件简洁得多，具体实现如下：

• 先创建标准动态路由文件 app/routes/f.$sub.tsx，对应 /f/:sub 路径。
• 在路由的loader函数（推荐服务器端验证）或组件内部，对sub参数做校验，只允许指定取值：

import { redirect, json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

// 服务器端提前拦截非法请求
export async function loader({ params }) {
  // 定义允许的子路径集合
  const allowedSubPaths = ["a", "b", "c"];
  const currentSub = params.sub;

  // 参数不在允许列表里时，返回404或重定向
  if (!allowedSubPaths.includes(currentSub)) {
    // 方式1：重定向到404页面
    throw redirect("/404");
    // 方式2：直接返回404状态码和提示
    // throw json({ message: "无效的子路径" }, { status: 404 });
  }

  // 验证通过后，传递参数给组件
  return json({ currentSub });
}

export default function FSubRoute() {
  const { currentSub } = useLoaderData();
  return <div>当前访问的子路径：{currentSub}</div>;
}

这种方式的优势很明显：

• 只需要维护一个路由文件，避免重复创建f.a.tsx、f.b.tsx这类冗余文件
• 后续要新增允许的子路径，只需要修改allowedSubPaths数组即可，维护成本低
• 服务器端提前拦截非法请求，避免不必要的组件渲染

内容的提问来源于stack exchange，提问作者黃呵呵