ما سبب مشكلة TypeError: Cannot read properties of undefined (reading “data’) في مشروع react.js

السلام عليكم ,
لقد راجعت ملفات الكود الخاصة بك 
لا يوجد خطأ في ملفات السيرفر , الخطأ في ملفات ال client .
في ملفات الclient 
 

   .catch(err=>{
            this.setState({error: err.response.data.message});

        });
// هذة سوف تعمل فقط في حال وجود خطأ من السريفر ولكن في حالتك الخطا من الclient لذلك يظهر لك خطأ undefined لقيمة الdata

و الخطأ الموجود في ال client هو موجود هنا كما هو موضح في الصورة في هذة الfunction 
 

 axios.post("/api/auth/register", data).then(res => {
            Auth.login(res.data);
            this.props.history.push('/');  // هنا بالتحديد 
        })

و المشكلة هو أن الhistory غير معرف , يوجد أكثر من حل لهذة المشكلة ولكن أبسطهم هو استعمال functional component بدلا من class component لان ذلك سيتيح لك استعمال useNavigation hook و التي ستمكنك من التنقل بسهولة 
و هذا هو الكود للتوضيح 
 

import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Card, Form, Input, Button } from "reactstrap";
import Error from "components/Error";
import Logo from "assets/logo.png";
import axios from "axios";
import Auth from "Auth";

const Register = () => {
  const navigate = useNavigate();    // استعمال useNavigation بدلا من props.history
  const [state, setState] = useState({
    name: "",
    username: "",
    password: "",
    error: "",
  });

  const onChange = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
      error: null,
    });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    let data = {
      name: state.name,
      username: state.username,
      password: state.password,
    };
    axios
      .post("/api/auth/register", data)
      .then((res) => {
        Auth.login(res.data);
        navigate("/");                         // استعمال التنقل بهذة الطريقة 
      })
      .catch((err) => {
        setState({
          ...state,
          error: err.response.data.message,
        });
      });
  };

  return (
    <Card className="auth col-lg-3 col-sm-6">
      <Form onSubmit={onSubmit}>
        <img src={Logo} alt="" width="200" />
        <h5 className="mb-4">إنشاء حساب جديد</h5>
        <Error error={state.error} />
        <Input
          value={state.name}
          name="name"
          onChange={onChange}
          placeholder="الاسم"
          required
          autoFocus
        />
        <Input
          value={state.username}
          name="username"
          onChange={onChange}
          placeholder="اسم المستخدم"
          required
        />
        <Input
          type="password"
          value={state.password}
          name="password"
          onChange={onChange}
          placeholder="كلمة المرور"
          required
        />
        <Button color="primary" block className="mb-3">
          إنشاء
        </Button>
        <small>
          <Link to="/login">تسجيل الدخول</Link>
        </small>
        <p className="m-3 text-muted">&copy; {new Date().getFullYear()}</p>
      </Form>
    </Card>
  );
};

export default Register;