Nextjs动态路由

Question

在我的下一个应用程序中，我有个人资料页面。我希望路由是这样的：

/@username

这就是为什么我使用这种文件格式的原因：

@[username].js

但这不管用。还有其他方法可以做到这一点吗？

Answer 1

您必须将其添加到页面下面，如下所示：

pages/user/[username].js

任何路线，如/user/@john，/user/@mark等，都将被pages/user/[username].js所匹配。匹配的path参数将作为查询参数发送到页面。

您可以访问query对象，如

{ "username": "@john" }

username.js

export default function User(props) {
  return (
    <div>
      <h1>Username: {props.url.query.username} </h1>
      <pre>{JSON.stringify(props, null, 2)}</pre>
    </div>
  );
}

例：码箱

希望这能帮上忙！