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

【问题标题】：How to fix the NextJs Query parameter that is not working on the static export?如何修复对静态导出不起作用的 NextJs 查询参数？
【发布时间】：2018-04-07 03:57:57
【问题描述】：

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

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

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

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

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

p 和 u 的值可以使用 RegExp 从 URL 中获取。这些函数被放置在组件内部。

  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?

【讨论】：