如何在Next.js中基于URL查询参数实现条件逻辑

现有代码问题 #

• 你定义的KF是非空对象，JavaScript中非空对象布尔判断永远为真，导致无论clientId取值如何都会命中Kátia的展示分支
• 缺少Next.js路由就绪判断，页面首次渲染时router.query可能为空，会导致匹配逻辑出错
• 需要先保证页面文件符合Next.js动态路由命名规则，才能正确获取路径中的参数值

实现步骤 #

1. 调整页面文件命名：如果你使用Pages Router，在pages目录下创建名为[clientId].js的文件，此时访问localhost:3000/katia-fantes时，路径段katia-fantes会自动被解析为router.query.clientId的取值
2. 修正条件判断逻辑，直接比对clientId与目标值即可

修正后代码 #

import { useRouter } from 'next/router'

const ClientDashboard = () => {
  const router = useRouter()
  // 等待路由初始化完成再执行逻辑判断
  if (!router.isReady) return null

  const { clientId } = router.query
  if (clientId === 'katia-fantes') {
    return <h1>你好 Kátia Fantes！</h1>
  }
  return <p>Page not found. Sorry</p>
}

export default ClientDashboard

内容的提问来源于stack exchange，提问作者Douglas Henrique