Nextjs 动态路由

【问题标题】：Nextjs dynamic routingNextjs 动态路由
【发布时间】：2020-05-31 11:25:28
【问题描述】：

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

/@username

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

@[username].js

但这不起作用。有没有其他方法可以做到这一点？

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

你必须在这样的页面下添加它：

pages/user/[username].js

/user/@john、/user/@mark等任何路由都会被pages/user/[username].js匹配。匹配的路径参数将作为查询参数发送到页面。

您将可以访问query 对象

{ "username": "@john" }

[用户名].js

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

例如：Codesandbox

希望这会有所帮助！

【讨论】：