javascript - 带有用户输入 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