Remix中@username形式路由实现问题：访问/@test返回404

你的问题出在路由文件命名不符合Remix的动态路由规则——Remix会把你当前的@username识别为静态路由段，而非动态参数，所以访问/@test时找不到匹配的路由，返回404。

以下是正确的实现步骤：

1. 修正路由文件命名 #

将你的路由文件从：

app/routes/@username/index.tsx

修改为：

app/routes/@$username/index.tsx

如果不需要嵌套子路由，也可以简化为：

app/routes/@$username.tsx

这样Remix会把@识别为路径的静态前缀，$username则作为动态参数匹配@之后的内容（比如test）。

2. 获取并使用动态参数 #

组件中获取参数的代码无需修改，依然可以用useParams()拿到用户名：

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

export default function UserProfile() {
  const { username } = useParams<{ username: string }>();
  return <div>用户：{username}</div>;
}

3. 排查路由冲突 #

如果仍返回404，检查是否存在优先级更高的静态路由（比如app/routes/@test.tsx）。Remix会优先匹配静态路由，确保这类路由不存在即可。

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