在Remix中创建通配动态路由及读取动态Slug的解决方案

方法1：通过Loader函数获取参数（推荐） #

Remix推荐在loader函数中处理数据预加载，你可以直接从loader的入参里拿到动态slug：

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

// 定义loader函数
export const loader = async ({ params }) => {
  // params.index对应路由文件$index.jsx里的变量名
  const slug = params.index;
  // 替换成你的实际数据获取逻辑
  const content = await fetchContentBySlug(slug);
  
  return json(content);
};

export default function DynamicPage() {
  const content = useLoaderData();
  return (
    <div>
      <h1>{content.title}</h1>
      <div>{content.body}</div>
    </div>
  );
}

方法2：在组件中直接读取参数（客户端场景） #

如果需要在客户端交互中使用slug，可以用useParams()钩子：

import { useParams } from "@remix-run/react";

export default function DynamicPage() {
  const { index: slug } = useParams();
  // 基于slug做客户端数据请求或其他操作
  
  return <div>当前访问的Slug：{slug}</div>;
}

优化提示 #

如果觉得index这个参数名不够直观，可以把路由文件重命名为$slug.jsx，这样参数名就变成slug，代码可读性更高：

// 路由文件：routes/$slug.jsx
export const loader = async ({ params }) => {
  const slug = params.slug; // 直接用slug更清晰
  // ...数据逻辑
};

确保路由文件放在routes根目录下，这样才能匹配mywebsite.com/[dynamic-slug]这类根级动态路径。

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