Как переделать функциональный компонент в классовый если у меня есть такие три строки?

Question

[ghrtghrtq]

У меня есть функциональный компонент SignupForm. Но мне нужно переделать его в классовый компонент.

Я знаю что классовый комопонент должен иметь:
- строку похожую на эту: class SignupForm extends React.Component
- метод render()

Но у меня еще есть:
1) const history = useHistory();
2) history.push("/home"); в методе - onSubmit
3)

const {handleSubmit, values, handleChange, errors, handleBlur} = useFormik({ /..  });

И я не знаю как переделать функциональный компонент в классовый компонент из-за этих трех строк. Как это сделать?

Маленькая часть SignupForm.js:

const SignupForm = () => {

    const history = useHistory();
    const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({  
      initialValues: {
      /........
      },
        validateOnBlur: false,
        /........
        validationSchema: yup.object().shape({ 
          username: yup.string()      
           .required('This field is required'),
       /........
      }),  
     onSubmit: async (formValues) => {
          try {
              const res = await apiFunction('", {
              /........
              });
              if(){              
            /.......
              } else {
                
                 history.push("/home");
             }
          } catch(e) { 
              /........
          } 
       },  
    });

   return (

      <form onSubmit={handleSubmit}>   
     <SignupInput
         /.......
         inputProps={{
           name:'username',
           value: values.username,
           onBlur: handleBlur,
           /.......
            }} error={errors.username} />
      <button type="submit" disabled={isSubmitting}>Submit Form</button>
     </form>
   );
};

Answer 1

[Wondermarin]

Зачем вам переделывать компонент в классовый? Не понятно.

1. useHistory можно заменить на:

import { withRouter } from "react-router-dom";

class MyComponent extends React.Component {
  ...

  render() {
    const { history } = this.props;
    ...
  }
}

export default withRouter(MyComponent);

2. history.push - заменять не надо.
3. У Formik есть HOC withFormik() https://jaredpalmer.com/formik/docs/api/withFormik.