带有用户输入 URL 的 Next.js 动态路由答案

【问题标题】：Next.js Dynamic Route With a User Inputted URL带有用户输入 URL 的 Next.js 动态路由
【发布时间】：2021-12-03 22:19:36
【问题描述】：

我正在使用 Next.js 路由器根据 URL slug 启用不同的仪表板。这在单击带有链接的按钮时有效，因为链接将信息传递给 Next.js 路由器，但当 URL 直接输入浏览器时它不起作用（即如果用户刷新页面则不起作用，或者直接使用 slug 键入 URL）。那么，虽然我可以在按下链接时使用动态路由，但如何在未按下链接时启用动态路由？

相关代码如下。非常感谢

const dashboard = () => {
  const router = useRouter();
  const {dashboardID} = router.query;

  return (
    <Dashboard dashboardID = {dashboardID}/>
  );
}

export default dashboard

【问题讨论】：

标签： javascript next.js dynamic-routing next-router

【解决方案1】：

在分页时，查询已经加载到上下文/自定义钩子上。

你需要等到路由器完全加载

const dashboard = () => {
      const router = useRouter();
      const {dashboardID} = router.query;
      
      if(!dashboardID) return null //Wait until query with dashboardID loads to avoid undefined errors 
      return (
        <Dashboard dashboardID = {dashboardID}/>
      );
    }
    
    export default dashboard

【讨论】：

太棒了 - 这完美！非常感谢 Chemi，周末愉快。