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

Question

我正在使用 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

Answer 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