reactjs 如何在Nextjs中访问_app.tsx内的窗口对象

p3rjfoxz 于 2022-12-26 发布在 React

关注(0)|答案(2)|浏览(162)

我正在为我的应用程序使用NextJS/React框架，目前正在实现Auth 0。由于我需要处理多个路径（localhost和实际地址），我希望像这样访问window对象。
_应用程序.tsx

function MyApp({ Component, pageProps }: AppProps) {

  return (
    <Auth0Provider
      domain={process.env.AUTH0_DOMAIN ?? ''}
      clientId={process.env.AUTH0_CLIENT_ID ?? ''}
      redirectUri={getAuth0RedirectURL()}
    >
      <Component {...pageProps} />
    </Auth0Provider>
  )
}

在我的getAuth0RedirectURL函数中，我只是尝试访问窗口对象并处理当前环境是开发环境还是生产环境。

export const getAuth0RedirectURL = (): string => {
  const url = new URL(window.location.origin) // here, I got error because window is not defined
  url.pathname = process.env.AUTH0_PATH

  return url.toString()
}

我确实认为当前的代码不起作用（window is undefined），因为它不处理客户端，所以还没有出现window对象。
我不确定如何正确访问_app.tsx中的window对象，以便安全地访问window.location.origin路径？

reactjs

来源：https://stackoverflow.com/questions/74909232/how-to-access-window-object-within-app-tsx-in-nextjs

2条答案

按热度按时间

5n0oy7gb1#

您说代码不起作用是对的，因为当您试图访问服务器上的window时，window是一个浏览器对象，因此您得到的是undefined。
1.您可以使用if statement检查window是否为undefined。

if (typeof window === "undefined") return null;
return (
  <Auth0Provider
    domain={process.env.AUTH0_DOMAIN ?? ''}
    clientId={process.env.AUTH0_CLIENT_ID ?? ''}
    redirectUri={getAuth0RedirectURL()}
  >
    <Component {...pageProps} />
  </Auth0Provider>
)

1.另一种实现方法是使用NextJS提供的动态导入。

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(() => import('../components/List'), {
  ssr: false
})

export default () => <DynamicComponentWithNoSSR />

1.或者，这也是我的建议，你可以找到Auth0团队的recommended solution，它 * 不 * 使用他们的SPA SDK，而是在服务器端进行身份验证，这是NextJS的做法。

赞(0）回复(0）举报 2022-12-26

sxpgvts32#

@Ansh的回答没错。
但是为什么不直接使用node env呢？

redirectUri={process.env.AUTH0_PATH}

如果需要检查当前环境：

process.env.NODE_ENV

如果您仍想访问窗口，可以用途：

global?.window && window.location.origin

赞(0）回复(0）举报 2022-12-26

我来回答

reactjs 如何在Nextjs中访问_app.tsx内的窗口对象

2条答案

相关问题

热门标签

最新问答