如何在 Next.JS 中使用 URL 查詢創建條件邏輯？

Question

我試圖找出如何基於 URL 查詢創建條件邏輯。

在下面的示例中，我試圖在 Kátia Fantes 訪問 localhost:3000/katia-fantes 時動態地向她問好。

我怎樣才能做到這一點？

import { useRouter } from 'next/router'

const ClientDashboard = () => {
  const router = useRouter()
  const { clientId } = router.query
  const KF = { 'clientId': 'katia-fantes' }

  if (KF) {
    return <h1>It's Katia</h1>;
  }
  return <p>Page not found. Sorry</p>;


}

export default ClientDashboard

Answer 1

要添加到此評論，

如果您的用例僅適用於katia-fantes ，那很好。 如果沒有，最好概括邏輯。

const { clientId } = router.query
const KF = { clientId }

  if (KF.clientId) {
    let client = KF.clientId.split('-')[0]
    client = client[0].toUpperCase() + client.splice(1)
    return <h1>It's {client}</h1>;
  }
  return <p>Page not found. Sorry</p>;