title: How to push to History in React Router Dom v6
body: <p>I tried many times but couldn't upgrade my code to make <code>push.history</code> work properly.</p>
  <p>here is my old code with react-router-dom v5:</p>
  <p>This code perfectly works in the previous version but as I upgraded to v6 I don't know what will be the replacement of <code>withRouter</code> and <code>push.history</code> in the new version.</p>
  <pre><code>import React from 'react'
  import { withRouter } from 'react-router-dom'
  import { connect } from 'react-redux'
  import PropTypes from 'prop-types'
  import TextFieldGroup from '../common/TextFieldGroup'
  import TextAreaFieldGroup from '../common/TextAreaFieldGroup'
  import SelectListGroup from '../common/SelectListGroup'
  import InputGroup from '../common/InputGroup'
  import { createProfile } from '../../actions/profileActions'
  
  class CreateProfile extends React.Component{
      constructor( props ) {
          super(props)
  
          this.state = {
              displaySocialInputs: false,
              handle: '',
              company: '',
              website: '',
              location: '',
              status: '',
              skills: '',
              githubusername: '',
              bio: '',
              twitter: '',
              facebook: '',
              linkedin: '',
              youtube: '',
              instagram: '',
              errors:{}
          }
  
  
          this.onChange = this.onChange.bind(this)
          this.onSubmit = this.onSubmit.bind(this)
  
      }
  
      UNSAFE_componentWillReceiveProps( nextProps ) {
          if ( nextProps.errors ) {
              this.setState(()=&gt;({ errors: nextProps.errors }))
          }
      }
      onSubmit( e ){
          e.preventDefault()
          
          const profileData = {
              handle: this.state.handle,
              company: this.state.company,
              website: this.state.website,
              location: this.state.location,
              status: this.state.status,
              skills: this.state.skills,
              githubusername: this.state.githubusername,
              bio: this.state.bio,
              twitter: this.state.twitter,
              facebook: this.state.facebook,
              linkedin: this.state.linkedin,
              youtube: this.state.youtube,
              instagram: this.state.instagram,
          }
  
          this.props.createProfile( profileData , this.props.history )
      }
  
      onChange( e ) {
          e.persist()
          this.setState(()=&gt;({ [ e.target.name ]: e.target.value }))
      }
  
      render(){
  
          const options = [
              { label: 'وضعیت حرفه ای خود را انتخاب فرمایید *' , value : 0 },
              { label: 'برنامه نویس' , value : 'برنامه نویس' },
              { label: 'برنامه نویس مبتدی' , value : 'برنامه نویس مبتدی' },
              { label: 'برنامه نویس با تجربه' , value : 'برنامه نویس با تجربه' },
              { label: 'مدیر' , value : 'مدیر' },
              { label: 'درحال یادگیری' , value : 'درحال یادگیری' },
              { label: 'مدرس' , value : 'مدرس' },
              { label: 'دانشجو' , value : 'دانشجو' },
              { label: 'سایر' , value : 'سایر' }
  
          ]
  
          const { errors , displaySocialInputs } = this.state
          let socialInputes
  
          if ( displaySocialInputs ) {
              socialInputes = (
                      &lt;div&gt;
                          &lt;InputGroup 
                              placeholder=&quot;آدرس شبکه توئیتر&quot;
                              name=&quot;twitter&quot;
                              icon=&quot;fab fa-twitter&quot;
                              value={this.state.twitter}
                              onChange={this.onChange}
                              error={errors.twitter}
                          /&gt;
  
  
                          &lt;InputGroup 
                              placeholder=&quot;آدرس شبکه فیسبوک&quot;
                              name=&quot;facebook&quot;
                              icon=&quot;fab fa-facebook&quot;
                              value={this.state.facebook}
                              onChange={this.onChange}
                              error={errors.facebook}
                          /&gt;
  
                          &lt;InputGroup 
                              placeholder=&quot;آدرس شبکه لینکدن&quot;
                              name=&quot;linkedin&quot;
                              icon=&quot;fab fa-linkedin&quot;
                              value={this.state.linkedin}
                              onChange={this.onChange}
                              error={errors.linkedin}
                          /&gt;
  
  
                          &lt;InputGroup 
                              placeholder=&quot;آدرس شبکه یوتیوب&quot;
                              name=&quot;youtube&quot;
                              icon=&quot;fab fa-youtube&quot;
                              value={this.state.youtube}
                              onChange={this.onChange}
                              error={errors.youtube}
                          /&gt;
  
  
                          &lt;InputGroup 
                              placeholder=&quot;آدرس شبکه اینستاگرم&quot;
                              name=&quot;instagram&quot;
                              icon=&quot;fab fa-instagram&quot;
                              value={this.state.instagram}
                              onChange={this.onChange}
                              error={errors.instagram}
                          /&gt;
  
                      &lt;/div&gt;
              )
          }
  
          return (
              &lt;div className=&quot;create-profile&quot;&gt;
                  &lt;div className=&quot;container&quot;&gt;
                      &lt;div className=&quot;row&quot;&gt;
                          &lt;div className=&quot;col-md-8 m-auto&quot;&gt;
                              &lt;h1 className=&quot;display-4 text-center&quot;&gt;ساخت پروفایل شما&lt;/h1&gt;
                              &lt;p className=&quot;lead text-center&quot;&gt;یک معرفی خوب وصعت کارتان را بیشتر می کند&lt;/p&gt;
                              &lt;small className=&quot;d-block bp-3 text-right&quot;&gt;فیلدهای ستاره دار * اجباری می باشند&lt;/small&gt;
                              &lt;form onSubmit={ this.onSubmit }&gt;
  
                                  &lt;TextFieldGroup 
                                      placeholder=&quot;هندلر پروفایل *&quot;
                                      name=&quot;handle&quot;
                                      value={this.state.handle}
                                      onChange={this.onChange}
                                      error={errors.handle}
                                      info=&quot;منظور از handle داشتن URL اختصاصی پروفایل شماست&quot;
                                  /&gt;
  
  
                                  &lt;SelectListGroup 
                                      placeholder=&quot;وضعیت&quot;
                                      name=&quot;status&quot;
                                      value={this.state.status}
                                      onChange={this.onChange}
                                      error={errors.status}
                                      options={options}
                                      info=&quot;تصویری از وضعیت کنونی شما&quot;
                                  /&gt;
  
                                  &lt;TextFieldGroup 
                                      placeholder=&quot;شرکت&quot;
                                      name=&quot;company&quot;
                                      value={this.state.company}
                                      onChange={this.onChange}
                                      error={errors.company}
                                      info=&quot;شرکت خودتان یا جایی که در آنجا مشغول به کار هستید&quot;
                                  /&gt;
  
                                  &lt;TextFieldGroup 
                                      placeholder=&quot;وب سایت&quot;
                                      name=&quot;website&quot;
                                      value={this.state.website}
                                      onChange={this.onChange}
                                      error={errors.website}
                                      info=&quot;وب سایت خودتان یا جاییکه کار می کنید&quot;
                                  /&gt;
  
                                  &lt;TextFieldGroup 
                                      placeholder=&quot;محل&quot;
                                      name=&quot;location&quot;
                                      value={this.state.location}
                                      onChange={this.onChange}
                                      error={errors.location}
                                      info=&quot;شهر یا استان و شهر&quot;
                                  /&gt;
  
                                  &lt;TextFieldGroup 
                                      placeholder=&quot;مهارت ها *&quot;
                                      name=&quot;skills&quot;
                                      value={this.state.skills}
                                      onChange={this.onChange}
                                      error={errors.skills}
                                      info=&quot;برای جدا سازی عبارت ها از کاما استفاده کنید html, css, js, php&quot;
                                  /&gt;
  
  
                                  &lt;TextFieldGroup 
                                      placeholder=&quot;نام کاربری شما در گیت هاب&quot;
                                      name=&quot;githubusername&quot;
                                      value={this.state.githubusername}
                                      onChange={this.onChange}
                                      error={errors.githubusername}
                                      info=&quot;برای ایجاد ارتباط و دسترسی به مخازن عمومی شما لطفا نام کاربری خودتان را وارد فرمایید&quot;
                                  /&gt;
  
                                  &lt;TextAreaFieldGroup 
                                      placeholder=&quot;مختصری از خودتان&quot;
                                      name=&quot;bio&quot;
                                      value={this.state.bio}
                                      onChange={this.onChange}
                                      error={errors.bio}
                                      info=&quot;لطفا توضیح مختصری از خودتان برای علاقمندان خودتان بنویسد&quot;
                                  /&gt;
  
                                  &lt;div className=&quot;mb-3 text-right&quot;&gt;
                                      &lt;button
                                          type=&quot;button&quot;                                        
                                          className=&quot;btn btn-light&quot; onClick={ () =&gt; {
                                          this.setState(( prevState)=&gt;({ displaySocialInputs: !prevState.displaySocialInputs }))
                                      }}&gt;
                                                  اضافه کردن کانکشن در مدیا
                                      &lt;/button&gt;
                                      &lt;span className=&quot;text-muted&quot;&gt;اختیاری میباشد&lt;/span&gt;
                                  &lt;/div&gt;
                                          { socialInputes }
                                          &lt;input type=&quot;submit&quot; value=&quot;ثبت&quot; className=&quot;btn btn-info btn-block mt-4&quot; /&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  CreateProfile.propTypes = {
      profile: PropTypes.object.isRequired,
      errors: PropTypes.object.isRequired
  }
  
  const mapStateToProps = ( state ) =&gt; {
      return {
          profile: state.profile,
          errors: state.errors
      }
  }
  
  export default connect( mapStateToProps , { createProfile })( withRouter( CreateProfile ) )
  
  </code></pre>
  <p>My action files</p>
  <pre><code>export const createProfile = ( profileData , history ) =&gt; ( dispatch ) =&gt; {
    axios.post( '/api/profile' , profileData )
    .then(( result ) =&gt;{
      history.push('/dashboard') 
    }).catch(( errors )=&gt; {
      dispatch({
        type: GET_ERRORS,
        payload: errors.response.data
      })
    })
  }
  </code></pre>