帶有用戶輸入 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