无法在next.js中获取url查询参数

时间:2019-12-01 21:39:42

标签: reactjs next.js

我只是想在我的URL中获取参数的值。

我是next.js的新手,但总体来说还是相当新的。

我的网址如下:

localhost:3000/?code=VhXHWwRemC32dPmm3oj0mMravO6MP3

现在,我只是呈现一个页面,如下所示:

const Index = () => {
       const router = useRouter();
       const code = router.query.code;
       console.log(code);
       return(
       <div>
           <p>code: {code}</p>
           <a href={Oauth.discord_login_url}login</a>
           </div>)
        };

这样我就可以查看是否从网址正确获取了代码。

一旦我以不一致的身份登录,我将返回索引,然后该URL看起来就像我上面显示的那样。我试图获取代码的价值,以便可以使用它。令我感到困惑的是

<p>code: {code}</p> 

成功在页面上显示“代码”的值。但是

console.log(code) 

显示未定义。为什么不同?

1 个答案:

答案 0 :(得分:0)

尝试添加getInitialProps

const Index = () => {
  const router = useRouter();
  const code = router.query.code;
  console.log(code); 

  Index.getInitialProps = async () => {
    return {};
  };

 return ( 
   <div>
     <p>code: {code}</p> 
     <a href={Oauth.discord_login_url}login</a>
   </div>
  ) 

};