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

Question

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

简单作为localhost:3000共同进入主页这将呈现一些默认文本"Hello user"。如果用户输入"localhost:3000/?name=JohnDoe"这应该呈现Hello JohnDoe。

我尝试过的事情。我能够通过下一个路由器使用事件处理程序添加查询参数。router.push('/?name=JohnDoe)但是我不知道当用户直接使用带有查询参数

的链接进入页面时设置状态的解决方案。

Answer 1

您可以在getServerSideProps中访问查询，然后重定向或做任何你想做的查询:

const getServerSideProps = (ctx) => {
const {params} = ctx;

if(params){
return {
redirect: {
permanent: false,
destination: "/login",
}
}
}

Answer 2

要读取查询参数，您应该使用router.query。

下面是一个示例，将在localhost:3000上渲染'Hello user'，在localhost:3000?name=JohnDoe上渲染'Hello JohnDoe'

import { useRouter } from 'next/router';
const Page = () => {
const router = useRouter();
const userName = router.query.name ?? 'user';
return <div>Hello {userName}</div>;
};
export default Page;