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

Question

我使用Next.js路由器根据URL段符启用不同的仪表板。当一个带有链接的按钮被点击时，它会工作，因为链接将信息传递给Next.js路由器，但是当一个URL被直接输入到浏览器中时，它就不起作用了(也就是说，如果用户刷新了页面，或者只是直接输入了带符号的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