如何在 NextJS 中将参数 url 重写为目录而不在刷新时更改页面？

Question

好的，所以它可能很简单，但我无法弄清楚。

每当我在 url 中键入 /login 时，我只想留在主页上而不是重定向到 /pages/login（目前为 404）。 我还需要将其保留为 GET 参数来切换我的 LoginModal。

import Link from 'next/link'

// components/Header.js
<Link href="/?login" as="/login">
   <LoginButton />
</Link>

// components/Auth.js
const Auth = () => {
    const router = useRouter()
    return (
        <>
            { 'login' in router.query && <LoginModal />}
            { 'register' in router.query && <RegisterModal />}
        </>
    )
}

// pages/index.js
const Index = () => {
  return (
    <>
      <Header />
      <HomePage />
      <Auth />
    </>
  )
}

// pages/login.js doesn't exist

谢谢！

Answer 1

这已在 NextJS 更新 9.5 中通过 Rewrite https://nextjs.org/docs/api-reference/next.config.js/rewrites 解决

// nextjs.config.js

module.exports = {
  async rewrites() {
    return [
      {
        source: '/login',
        destination: '/?login',
      },
      {
        source: '/register',
        destination: '/?register',
      },
    ]
  },
}

它就像那样完美地工作。