ghrtghrtq

погугли по слову protected route react
https://dev.to/skylerwebdev/setting-up-a-private-r...

идея такая, что сделать обертку для роутов с авторизацией, и сделать как то так

<Route exact path="/" component={SignupForm} /> 
<ProtectedRoute path="/home" component={Home} />  {/* если что, будет редиректить на "/" */}
<Route path="/login" component={LoginForm} />

https://medium.com/@s4y.solutions/react-route-4-pr...

Для таких целей правильнее использовать приватный роут.

import React from 'react';
import { Route, Redirect, useLocation } from 'react-router-dom';

export const PrivateRoute = (props) => {
  const token = localStorage.getItem("myToken");
  const location = useLocation();

  if (token) {
    return <Route {...props} />
  }

  return (
    <Redirect to={{ pathname: '/', state: { from: location } }} />
  );
};

// Use Private Route
import { PrivateRoute } from './PrivateRoute';
import { Home } from './Home';

<PrivateRoute path="/home">
  <Home />
</PrivateRoute>

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

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.

дело в том, что

onSubmit: async (formValues) => {
          try {
              const res = await .........
              if(Array.isArray(res)){         
                  const err = res[0].message;     
                  return (<div className="err-response">{err}</div>);
// ^ это не return из реакт-компонента, а из функции обработчика сабмита формы
// рендериться ничего не будет
              }
      },

выход такой, что при ошибке бы записываешь это в стейт компонента, что-то в духе

const SignupForm = () => { 

  const [errorMessage, setErrorMessage] = React.useState(null)

.... 
if(Array.isArray(res)){        
  // то есть ошибка это когда res - массив? 
  setErrorMessage (res[0].message)
  // теперь в errorMessage у нас текст ошибки, а не null
}

....

return (
  <div className="form">
    { errorMessage && <p>${errorMessage}</p> }
    {/* ^ если там null, то ничего не будет писаться  */}
  
  .....
  </div>
)

}

uvScreenCameraPro

Лучше всего Open Broadcaster Studio

Ещё можно ffmpeg'ом. Вот, как под Windows, Linux, Mac OS.
Минус в том, что не записывает курсор мыши, клики и нажатые клавиши.

obs

VLC