如何修复在静态导出时不起作用的 NextJs 查询参数？

Question

我导出了一个 NextJs 应用程序。当我将它导出到静态应用程序时，URL 参数在服务器上不起作用。（导出到静态 HTML 应用程序）

例如url：http://app.domain.com/?p=demo&u=udemo

export default ({ url: { query: { p ,u } } }) => (
  <div>
    <Ads pub={p} user={u} />
   </div>
)

p 和 u 值未传递给使用默认值的组件。有什么方法可以在不使用节点 js 的情况下将查询参数传递给组件？

Answer 1

可以使用 RegExp 从 URL 中获取 p 和 u 的值。这些功能都放在组件内部。

  getParameterByName(name, url) {
    if (!url) url = window.location.pathname;
    name = name.replace(/[\[\]]/g, "\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
} 


componentDidMount(){
  const url = window.location.href;
  const pub=this.getParameterByName('pub',url);
 const user=this.getParameterByName('user',url);
}

致谢：How can I get query string values in JavaScript?

如何修复在静态导出时不起作用的 NextJs 查询参数？

How to fix the NextJs Query parameter that is not working on the static export?

reactjs

next.js