react+next.js遇到的問題及解決

1.使用react-image插件做圖片預覽，報錯：window is not defined。

因為next.js使用的是服務端渲染，沒有window。

解決方法是引入的時候，加一個對象 {SSR：false}。

import dynamic from 'next/dynamic'
let Zmage = dynamic(import('react-zmage'), { ssr: false })

 

2.使用this.props.router.query獲取不到查詢參數。

本地能獲取地址欄的參數，但是線上就獲取不到。

因為本地開了服務，線上是靜態資源，沒開服務，所以獲取不到。

可以改為window.location來獲取並做處理。

封裝成一個工具類，隨時可以引入使用。

export const getPageQuery = () => {
  const queryStr = window.location.href.split('?')[1];
    const queryArr = queryStr.split('&');
    const queryObj = {};
    queryArr.forEach(d => {
      const arr = d.split('=');
      if (arr[0]) {
        queryObj[arr[0]] = arr[1];
      }
    });
  return queryObj
}

 

3.使用window.location拿地址欄的數據，數字和字母可以直接解析。

中文需要轉碼，否則拿到的是一串編碼后的數據。

如下圖，分別是地址欄的數據，以及從地址欄拿到的數據。

編碼方式 let str=encodeURI (數據)

解碼 let a=decodeURI (數據）

 

（3參考：https://blog.csdn.net/weixin_41863239/article/details/82083734?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control）