كيفية عمل redirect في react-router؟

لا يمكننا استخدام ال redirect في ال function كما فعلت لأنها كائن أو component وجب أن تستعمل ك component ولذلك نحتاج في هذا الموقف أن نستخدم ال hook ال useHistory  أو ال history.push بما أنك تستخدم الإصدار الأخير كالتالي

import { useHistory } from "react-router-dom"; //في الأعلى hook  يجبإستدعاء هذا ال 


async handleForm(event) {
    event.preventDefault();

    const username = this.state.user.username;
    const email = this.state.user.email;
    const password = this.state.user.password;
    const confirmPassword = this.state.user.confirmPassword;
    const formData = { username, email, password, confirmPassword };

    axios.post('/register', formData, { headers: {'Accept': 'application/json'} })
      .then((response) => {
        this.setState({
          errors: {}
        });

        // <Redirect to="/" /> بدلاً من ذلك
      
        //let history = useHistory(); history.push('/')functional component إذا كنت تستخدم 
  		
        this.props.history.push('/');
        
      }).catch((error) => {
        const errors = error.response.data.errors ? error.response.data.errors : {};
        errors.summary = error.response.data.message;

        this.setState({
          errors
        });
      });
  }

الأمر بسيط جدا 

دعنا نأخذ خطوة الى الوراء ونسئل ماهو ال Redirect ؟ 

بكل بساطه هو مكون موجود في ريأكت روتر من خلاله يمكنك تحويل المستخدم الى مسار أخر 

حسنا ولكي تقوم ريأكت بعرض مكون لابد من أن تقوم بعملية render ومن ضمن الأمور التي تجبر ريأكت على عملية الريندر أن يتم تغير ال state. 

جميل حتى هنا الامور بسيطه لذا فلكي تقوم ريأكت بالإستجابة إلى ما أخبرها به وتحويل المستخدم إلى مسار أخر لابد من أن تيم تحديث ال state بقيمة أريدها وعليها يتم التحويل

فيكننا بكل بساطة بإستخدام الكود التالي  

import React, { PropTypes } from 'react';
import { Redirect } from 'react-router'
import axios from 'axios';

import AppForm from '../../components/Form';


class FormPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      redirect: false,  // التعديل رقم 1
      errors: {},
      user: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      }
    };

    this.handleForm = this.processForm.bind(this);
    this.changeUser = this.changeUser.bind(this);
  }

  changeUser(event) {
    const target = event.target;
    const field = target.name;
    const user = this.state.user;
    user[field] = target.value;

    this.setState({
      user.field: field
    });
  }

  async handleForm(event) {
    event.preventDefault();

    const username = this.state.user.username;
    const email = this.state.user.email;
    const password = this.state.user.password;
    const confirmPassword = this.state.user.confirmPassword;
    const formData = { username, email, password, confirmPassword };

    axios.post('/register', formData, { headers: {'Accept': 'application/json'} })
      .then((response) => {
        this.setState({
          errors: {},
          redirect: true, // التعديل رقم 2
        });
		
      }).catch((error) => {
        const errors = error.response.data.errors ? error.response.data.errors : {};
        errors.summary = error.response.data.message;

        this.setState({
          errors
        });
      });
  }

  render() {
      if(this.state.redirect) return <Redirect to="" /> // التعديل رقم 3
    return (
      <>
        <div>
          <AppForm 
            onSubmit={this.handleForm}
            onChange={this.changeUser}
            errors={this.state.errors}
            user={this.state.user}
          />
        </div>
      </>
    );
  }
}

export default FormPage;

قمنا هنا ب ثلاثة تعديلات بسيطه

التعديل رقم 1: قمنا بإضافة خاصية جديده داخل ال state تسمى ب redirect وقيمتها ب false

التعديل رقم 2: في الكود الذي تعدل فيه قيمة ال State حدثنا أيضا قيمة ال redirect

التعديل رقم 3: بما أننا حدثنا ال state ف ريأكت سوف تقوم بالبحث داخل الداله render وترى هل نعتمد على القيم التي تم تغيرها في ال state لعرض مكون معين؟ إذا كانت الإجابه بنعم فتقوم بتنفيذ ال render مرة أخرى وبالتالي سوف يتحقق الشرط المكتول لتنفيذ عملية ال redirect ويتم عرض مكون Redirect الذي بدوره يقوم بتحويل المستخدم إلى المسار الذي تريد.