Question

Gatsby中的simple-auth示例在开发模式下工作正常，但是当我尝试构建它时，它将引发以下错误

WebpackError：TypeError：window .___ navigate不是函数

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

PrivateRoute.js：11 PrivateRoute src / 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

Gatsby simple-auth示例中的导航功能导致构建错误

1 个答案: