Gatsby 简单身份验证示例中的导航函数会导致构建错误

Question

Gatsby 中的简单身份验证示例在开发模式下运行良好，但是当我尝试构建它时，它会抛出以下错误

WebpackError： TypeError： window.___navigate 不是函数

索引.js：233 导航node_modules/gatsby-link/index.js：233：1

PrivateRoute.js：11 PrivateRoutesrc/components/PrivateRoute.js：11：14

似乎错误在于导致构建错误的导航功能。我用谷歌搜索并发现解决方法是在useEffect中使用导航，但是，网上没有我可以参考的示例。我正在尝试解决这个问题。任何成功解决此构建错误的人都可以分享他们如何解决此构建错误吗？谢谢

下面是 PrivateRoute.js 组件

import React, { Component } from "react"
import { navigate } from "gatsby"
import { isLoggedIn } from "../utils/auth"

const PrivateRoute = ({ component: Component, location, ...rest }) => {
if (!isLoggedIn() && location.pathname !== /admin) {
navigate("/admin")
return null
}
return <Component {...rest} />
}

export default PrivateRoute

Answer 1

它似乎低于工作。欢迎任何认为我的代码可以改进的人发表评论。希望它对某人有所帮助。谢谢

import React, { useEffect, Component } from "react"
import { navigate } from "gatsby"

import { isLoggedIn } from "../utils/auth"

const PrivateRoute = ({ component: Component, location, ...rest }) => {
useEffect(() => {
checkLoginStatus()
// return () => {
//   cleanup
// };
}, [])

const checkLoginStatus = () => {
if (!isLoggedIn() && location.pathname !== `/admin`) {
navigate("/admin")
return null
}
}

return <Component {...rest} />
}

export default PrivateRoute