在 next.js 中获取 url 查询参数时遇到问题

Question

我只是想在我的 url 中获取一个参数的值。

我是 next.js 的新手，总体上对反应还很陌生。

我的 url 看起来像：

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.

中正确获取代码

一旦我使用 discord 登录，我 return 到 Index 和 url 看起来就像我上面显示的那样。我正在尝试获取代码的价值，以便我可以使用它。让我困惑的是

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

成功在页面显示"code"的值。但是

console.log(code)

显示未定义。为什么不一样？

Answer 1

尝试添加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>
  ) 

};

在 next.js 中获取 url 查询参数时遇到问题

Having trouble getting url query parameter in next.js

reactjs

next.js