如何基于next.js中的查询参数显示具有不同状态的页面

zwghvu4y 于 2022-11-29 发布在其他

关注(0)|答案(2)|浏览(151)

我想根据next.js中不同的查询参数显示具有不同状态的页面，这样当用户使用带有查询参数的链接时，它不应该显示默认页面，而是基于状态。
为了简单起见，Coinsider将主页设置为localhost:3000这将呈现一些默认文本“Hello user”。如果用户输入localhost:3000/?name=JohnDoe，这将呈现Hello JohnDoe。
我已经尝试过的事情。我能够添加查询参数使用事件处理程序的通过下一个路由器。router.push('/?name=JohnDoe)但我不知道一个解决方案来设置状态时，用户直接进入页面使用查询参数的链接

next.js

来源：https://stackoverflow.com/questions/68518918/how-can-display-pages-with-different-states-based-on-query-parameters-in-next-js

2条答案

按热度按时间

snvhrwxg1#

您可以在***getServerSideProps***中访问该查询，然后重定向该查询或对该查询执行任何操作：

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

赞(0）回复(0）举报 2022-11-29

ecbunoof2#

要读取查询参数，应使用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;

赞(0）回复(0）举报 2022-11-29

我来回答

如何基于next.js中的查询参数显示具有不同状态的页面

2条答案

相关问题

热门标签

最新问答