Remix中如何实现连字符分隔的动态路由？

核心思路 #

由于你使用的路由框架（推测为Next.js App Router）原生不支持将动态参数放在连字符后的文件名格式（如someroute-$id），需要通过路由重写将自定义格式的URL映射到框架标准的动态路由结构上。

步骤1：创建标准动态路由文件 #

在app/routes目录下创建框架原生支持的动态路由结构：

app/
└── routes/
    └── someroute/
        └── [id]/
            └── page.js # 或 page.tsx

在page.js中编写页面逻辑，可正常获取id参数：

export default function SomeroutePage({ params }) {
  const { id } = params;
  return <div>当前路由ID：{id}</div>;
}

步骤2：配置路由重写规则 #

在项目根目录的next.config.js（或next.config.ts）中添加重写规则，将/someroute-xxx格式的请求转发到标准动态路由：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/someroute-:id',
        destination: '/someroute/:id',
      },
    ];
  },
};

module.exports = nextConfig;

原理说明 #

框架原生的动态路由语法依赖[]包裹参数（如[id]），直接使用someroute-$id会被识别为静态文件名，无法解析动态参数。通过重写规则，我们将自定义URL格式映射到框架能识别的动态路由上，既满足了URL格式需求，又能正常使用动态参数功能。

内容的提问来源于stack exchange，提问作者Yura Chim