呈现方法应该是props和state的纯函数

我收到的错误是 Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. .

似乎是因为这个代码

const LoginAuth = () => {
  navigate(routes.INDEX);
  return null;
};

去除 navigate(routes.INDEX); 停止错误。

代码有什么问题?我是否应该使用其他方法重定向 authUser ? 感谢您的帮助。

它是一部分

import React from 'react';
import { navigate } from 'gatsby';

import AuthUserContext from './AuthUserContext';
import withAuthentication from './withAuthentication';

import Layout from './Layout';
import LoginForm from './LoginForm';    
import * as routes from '../../constants/routes';

const LoginAuth = () => {
  navigate(routes.INDEX);
  return null;
};

const LoginPage = () => (
  <Layout>
    <Transition>
      <AuthUserContext.Consumer>
        {authUser => (authUser ? <LoginAuth /> : <LoginNonAuth />)}
      </AuthUserContext.Consumer>
    </Transition>
  </Layout>
);

const LoginNonAuth = () => <LoginForm />;

export default withAuthentication(LoginPage);