时间戳

首页 > 解决方案 > 如何在不更改页面刷新的情况下将参数 url 重写为 NextJS 中的目录？

javascript - 如何在不更改页面刷新的情况下将参数 url 重写为 NextJS 中的目录？

问题描述

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

每当我在 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

谢谢！

标签： javascriptnext.js

解决方案

这已在 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',
      },
    ]
  },
}

它就像那样完美地工作。

推荐阅读