在 React 中使用受保护路由时无法读取未定义的属性 'push'

Question

我正在尝试在我的仪表板中实施受保护的路由器。所以我的登陆页面直接是一个登录页面，如果用户成功登录，我想将页面重定向到我的仪表板。所以这是我的 index.js:

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/" component={Login} exact />
      <ProtectedRoute path="/admin" component={(props) => <AdminLayout {...props} />}/>
      <Route path="" component={() => "404 NOT FOUND"} />
    </Switch>
  </Router>,
  document.getElementById("root")
);

所以我的登录组件非常基础，我在这里获取数据并检查数据库中是否存在该用户的 ID：

const Login = ({ submitForm }, props) => {
  const [isSubmitted, setIsSubmitted] = useState(false);

  function submitForm() {
    setIsSubmitted(true);
  }
  const { handleChange, values, handleSubmit, errors } = useForm(
    submitForm,
    validate
  );

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const [login, setLogin] = useState(false);

  const fetchLogin = async (email, password) => {
    try {
      setLoading(true);
      const res = await Axios({
          //API CALL
      });
      if (res.status === 200) {
        setLogin(true);
        localStorage.setItem("user-info", JSON.stringify(res));
      }
      setLoading(false);
    } catch (err) {
      setError(err.message);
      setLoading(false);
    }
  };

  function loginButton() {
    fetchLogin(values.email, values.password);
    
    auth.login(() => {
      props.history.push("/admin");
    });
  }
  return (
    <form>
    </form>
  );
};

export default Login;

所以我有一个基本的 Auth class:

class Auth {
    constructor() {
      this.authenticated = false;
    }
  
    login(cb) {
      this.authenticated = true;
      cb();
    }
  
    logout(cb) {
      this.authenticated = false;
      cb();
    }
  
    isAuthenticated() {
      return this.authenticated;
    }
  }
  
  export default new Auth();

这是我的受保护路由器：

export const ProtectedRoute = ({
  component: Component,
  ...rest
}) => {
  return (
    <Route
      {...rest}
      render={props => {
        if (auth.isAuthenticated()) {
          return <Component {...props} />;
        } else {
          return (
            <Redirect
              to={{
                pathname: "/",
                state: {
                  from: props.location
                }
              }}
            />
          );
        }
      }}
    />
  );
};

所以一切看起来都很好，但是当我点击提交按钮时，我得到 无法读取属性 'push' of undefined 我真的不明白我为什么明白了。

请看看我的代码并帮助我。评论也很感激。

Answer 1

好的，我认为问题在于您正在解构 props 并尝试使用默认值。

const Login = ({ submitForm }, props) => {

你能否尝试将历史记录添加到你的解构列表中，或者反过来只使用 props 而不是解构进入你的组件的 props，然后再重组

const Login = ({ submitForm, history}) => { rest of your component...

or 

const Login = (props) => {
  const { submitForm, history } = props;
}

正如我之前评论中的文档所述，当您在 Route

中使用道具时，它们会自动传入：匹配、位置和历史记录

在 React 中使用受保护路由时无法读取未定义的属性 'push'

Cannot read property 'push' of undefined when using protected route in React

authentication

history

router

protected

reactjs

在 React 中使用受保护路由时无法读取未定义的 属性 'push'

Cannot read property 'push' of undefined when using protected route in React

authentication

history

router

protected

reactjs

在 React 中使用受保护路由时无法读取未定义的属性 'push'