react+next.js遇到的问题及解决
<p class="md-end-block md-p md-focus"><span class="md-plain">1.使用react-image插件做图片预览，报错：window is not defined。</span></p><p class="md-end-block md-p"><span class="md-plain">因为next.js使用的是服务端渲染，没有window。</span></p>
<p class="md-end-block md-p"><span class="md-plain">解决方法是引入的时候，加一个对象 {SSR：false}。</span></p>
<div class="cnblogs_code">
<pre>import dynamic from 'next/dynamic'<span style="color: rgba(0, 0, 0, 1)">
let Zmage </span>= dynamic(import('react-zmage'), { ssr: <span style="color: rgba(0, 0, 255, 1)">false</span> })</pre>
</div>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">2.使用this.props.router.query获取不到查询参数。</span></p>
<p class="md-end-block md-p"><span class="md-plain">本地能获取地址栏的参数，但是线上就获取不到。</span></p>
<p class="md-end-block md-p"><span class="md-plain">因为本地开了服务，线上是静态资源，没开服务，所以获取不到。</span></p>
<p class="md-end-block md-p"><span class="md-plain">可以改为window.location来获取并做处理。</span></p>
<p class="md-end-block md-p"><span class="md-plain">封装成一个工具类，随时可以引入使用。</span></p>
<div class="cnblogs_code">
<pre>export const getPageQuery = () =><span style="color: rgba(0, 0, 0, 1)"> {
const queryStr </span>= window.location.href.split('?');
const queryArr </span>= queryStr.split('&'<span style="color: rgba(0, 0, 0, 1)">);
const queryObj </span>=<span style="color: rgba(0, 0, 0, 1)"> {};
queryArr.forEach(d </span>=><span style="color: rgba(0, 0, 0, 1)"> {
const arr </span>= d.split('='<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (arr) {
queryObj] = arr;
}
});
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> queryObj
}</span></pre>
</div>
<p> </p>
<p>3.使用window.location拿地址栏的数据，数字和字母可以直接解析。</p>
<p>中文需要转码，否则拿到的是一串编码后的数据。</p>
<p class="md-end-block md-p md-focus"><span class="md-plain">如下图，分别是地址栏的数据，以及从地址栏拿到的数据。</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">编码方式 let str=encodeURI (数据)</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">解码 let a=decodeURI (数据）</span></p>
<p class="md-end-block md-p md-focus"><img src="https://img2020.cnblogs.com/blog/1856924/202101/1856924-20210106182309097-2095894193.png"></p>
<p class="md-end-block md-p md-focus"> </p>
<p class="md-end-block md-p md-focus"><img src="https://img2020.cnblogs.com/blog/1856924/202101/1856924-20210106181825022-1165582884.png"></p>
<p class="md-end-block md-p md-focus">（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）</p>
<p class="md-end-block md-p md-focus"> </p>
<p><span> </span></p><br><br>
来源：https://www.cnblogs.com/afafaa/p/14217661.html
頁:
[1]