在我的Next.js应用程序中，我似乎无法访问窗口:
未处理的拒绝(ReferenceError):没有定义窗口
componentWillMount() {
console.log('window.innerHeight', window.innerHeight);
}
当前回答
我必须从URL访问哈希，所以我想到了这个
const hash = global.window && window.location.hash;
其他回答
对于这种情况，Next.js具有动态导入功能。
对于包含只在浏览器中工作的库的模块，建议使用动态导入。请参考
我必须从URL访问哈希，所以我想到了这个
const hash = global.window && window.location.hash;
没有SSR
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(
() => import('../components/hello3'),
{ ssr: false }
)
function Home() {
return (
<div>
<Header />
<DynamicComponentWithNoSSR />
<p>HOME PAGE is here!</p>
</div>
)
}
export default Home
如果你使用React Hooks，你可以将代码移动到Effect Hook中:
import * as React from "react";
export const MyComp = () => {
React.useEffect(() => {
// window is accessible here.
console.log("window.innerHeight", window.innerHeight);
}, []);
return (<div></div>)
}
useEffect中的代码只在客户端(在浏览器中)执行，因此它可以访问window。
有史以来最好的解决方案 从'next/dynamic'导入dynamic; const Chart = dynamic(()=> import('react-apexcharts')， { ssr:假的, })
