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

Question

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

相关代码如下。非常感谢

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

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

export default dashboard

Answer 1

在分页时，查询已加载到 context/custom 挂钩上。

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

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

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

Next.js Dynamic Route With a User Inputted URL

javascript

next.js

dynamic-routing

next-router