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

Question

我使用Next.js路由器启用不同的仪表板取决于URL段。当点击带有链接的按钮时，这是有效的，因为链接将信息传递给ext.js路由器，但当直接将网址输入浏览器时，这是无效的（即，如果用户刷新页面，或者直接用段塞键入网址）。因此，当我能够在按下链接时使用动态路由时，如何在未按下链接时启用动态路由？

相关代码如下。非常感谢你

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