next.js - next.js中如何根据查询参数显示不同状态的页面

Question

我想根据 next.js 中的不同查询参数显示具有不同状态的页面，这样当用户使用带有查询参数的链接时，它不应该显示默认页面，而是基于状态。

为简单起见，考虑主页，因为 localhost:3000 这会呈现一些默认文本“Hello user”如果用户输入localhost:3000/?name=JohnDoe 这应该呈现 Hello JohnDoe。

我尝试过的事情。我可以通过 next router 使用事件处理程序添加查询参数。 router.push('/?name=JohnDoe) 但是我不知道当用户使用带有查询参数的链接直接进入页面时设置状态的解决方案

标签： next.jsnext-router

Answer 1

您可以在getServerSideProps中访问查询，然后使用该查询重定向或做任何您想做的事情：

const getServerSideProps = (ctx) => {
   const {params} = ctx;
   
   if(params){
     return {
        redirect: {
        permanent: false,
        destination: "/login",
     }
   }
}