title: Need help replacing withRouter and History in React for Social Media Project
body: <p>Need help replacing withRouter and History in React in my code below. This used to work for React v5 but I want to find a way to make this work in v6. I am not sure how to go about it so Please help! Here is my CreateProfile.js for my social media project:</p>
  <pre><code>import React, { Fragment, useState } from 'react';
  import { Link, withRouter } from 'react-router-dom';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { createProfile } from '../../actions/profile';
  
  const CreateProfile = ({ createProfile, history }) =&gt; {
    const [formData, setFormData] = useState({
      company: '',
      website: '',
      location: '',
      status: '',
      skills: '',
      githubusername: '',
      bio: '',
      twitter: '',
      facebook: '',
      linkedin: '',
      youtube: '',
      instagram: ''
    });
  
    const [displaySocialInputs, toggleSocialInputs] = useState(false);
  
    const {
      company,
      website,
      location,
      status,
      skills,
      githubusername,
      bio,
      twitter,
      facebook,
      linkedin,
      youtube,
      instagram
    } = formData;
  
    const onChange = e =&gt; setFormData({ ...formData, [e.target.name]: e.target.value });
  
    const onSubmit = e =&gt; {
      e.preventDefault();
      createProfile(formData, history);
  
    }
  
    
  
  
    return (
      &lt;Fragment&gt;      
        &lt;h1 className=&quot;large text-primary&quot;&gt;
      Create Your Profile
      &lt;/h1&gt;
    &lt;p className=&quot;lead&quot;&gt;
      &lt;i className=&quot;fas fa-user&quot;&gt;&lt;/i&gt; Let's get some information to make your
      profile stand out
    &lt;/p&gt;
    &lt;small&gt;* = required field&lt;/small&gt;
    &lt;form className=&quot;form&quot; onSubmit={e =&gt; onSubmit(e)}&gt;
      &lt;div className=&quot;form-group&quot;&gt;
        &lt;select name=&quot;status&quot; value={status} onChange={e =&gt; onChange(e)}&gt;
          &lt;option value=&quot;0&quot;&gt;* Select Professional Status&lt;/option&gt;
          &lt;option value=&quot;Developer&quot;&gt;Developer&lt;/option&gt;
          &lt;option value=&quot;Junior Developer&quot;&gt;Junior Developer&lt;/option&gt;
          &lt;option value=&quot;Senior Developer&quot;&gt;Senior Developer&lt;/option&gt;
          &lt;option value=&quot;Manager&quot;&gt;Manager&lt;/option&gt;
          &lt;option value=&quot;Student or Learning&quot;&gt;Student or Learning&lt;/option&gt;
          &lt;option value=&quot;Instructor&quot;&gt;Instructor or Teacher&lt;/option&gt;
          &lt;option value=&quot;Intern&quot;&gt;Intern&lt;/option&gt;
          &lt;option value=&quot;Other&quot;&gt;Other&lt;/option&gt;
        &lt;/select&gt;
        &lt;small className=&quot;form-text&quot;
          &gt;Give us an idea of where you are at in your career&lt;/small
        &gt;
      &lt;/div&gt;
      &lt;div className=&quot;form-group&quot;&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Company&quot; name=&quot;company&quot; value={company} onChange={e =&gt; onChange(e)} /&gt;
        &lt;small className=&quot;form-text&quot;
          &gt;Could be your own company or one you work for&lt;/small
        &gt;
      &lt;/div&gt;
      &lt;div className=&quot;form-group&quot;&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Website&quot; name=&quot;website&quot; value={website} onChange={e =&gt; onChange(e)} /&gt;
        &lt;small className=&quot;form-text&quot;
          &gt;Could be your own or a company website&lt;/small
        &gt;
      &lt;/div&gt;
      &lt;div className=&quot;form-group&quot;&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Location&quot; name=&quot;location&quot; value={location} onChange={e =&gt; onChange(e)}/&gt;
        &lt;small className=&quot;form-text&quot;
          &gt;City &amp; state suggested (eg. Boston, MA)&lt;/small
        &gt;
      &lt;/div&gt;
      &lt;div className=&quot;form-group&quot;&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;* Skills&quot; name=&quot;skills&quot; value={skills} onChange={e =&gt; onChange(e)} /&gt;
        &lt;small className=&quot;form-text&quot;
          &gt;Please use comma separated values (eg.
          HTML,CSS,JavaScript,PHP)&lt;/small
        &gt;
      &lt;/div&gt;
      &lt;div className=&quot;form-group&quot;&gt;
        &lt;input
          type=&quot;text&quot;
          placeholder=&quot;Github Username&quot;
          name=&quot;githubusername&quot;
          value={githubusername} onChange={e =&gt; onChange(e)}
        /&gt;
        &lt;small className=&quot;form-text&quot;
          &gt;If you want your latest repos and a Github link, include your
          username&lt;/small
        &gt;
      &lt;/div&gt;
      &lt;div className=&quot;form-group&quot;&gt;
        &lt;textarea placeholder=&quot;A short bio of yourself&quot; name=&quot;bio&quot; value={bio} onChange={e =&gt; onChange(e)}&gt;&lt;/textarea&gt;
        &lt;small className=&quot;form-text&quot;&gt;Tell us a little about yourself&lt;/small&gt;
      &lt;/div&gt;
  
      &lt;div className=&quot;my-2&quot;&gt;
        &lt;button onClick={() =&gt; toggleSocialInputs(!displaySocialInputs)} type=&quot;button&quot; className=&quot;btn btn-light&quot;&gt;
          Add Social Network Links
        &lt;/button&gt;
        &lt;span&gt;Optional&lt;/span&gt;
      &lt;/div&gt;
  
      {displaySocialInputs &amp;&amp; &lt;Fragment&gt;
        &lt;div className=&quot;form-group social-input&quot;&gt;
        &lt;i className=&quot;fab fa-twitter fa-2x&quot;&gt;&lt;/i&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Twitter URL&quot; name=&quot;twitter&quot; value={twitter} onChange={e =&gt; onChange(e)} /&gt;
      &lt;/div&gt;
  
      &lt;div className=&quot;form-group social-input&quot;&gt;
        &lt;i className=&quot;fab fa-facebook fa-2x&quot;&gt;&lt;/i&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Facebook URL&quot; name=&quot;facebook&quot; value={facebook} onChange={e =&gt; onChange(e)} /&gt;
      &lt;/div&gt;
  
      &lt;div className=&quot;form-group social-input&quot;&gt;
        &lt;i className=&quot;fab fa-youtube fa-2x&quot;&gt;&lt;/i&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;YouTube URL&quot; name=&quot;youtube&quot; value={youtube} onChange={e =&gt; onChange(e)} /&gt;
      &lt;/div&gt;
  
      &lt;div className=&quot;form-group social-input&quot;&gt;
        &lt;i className=&quot;fab fa-linkedin fa-2x&quot;&gt;&lt;/i&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Linkedin URL&quot; name=&quot;linkedin&quot; value={linkedin} onChange={e =&gt; onChange(e)} /&gt;
      &lt;/div&gt;
  
      &lt;div className=&quot;form-group social-input&quot;&gt;
        &lt;i className=&quot;fab fa-instagram fa-2x&quot;&gt;&lt;/i&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Instagram URL&quot; name=&quot;instagram&quot; value={instagram} onChange={e =&gt; onChange(e)} /&gt;
      &lt;/div&gt;
      &lt;/Fragment&gt;}
  
      
      &lt;input type=&quot;submit&quot; className=&quot;btn btn-primary my-1&quot; /&gt;
      &lt;a className=&quot;btn btn-light my-1&quot; href=&quot;dashboard.html&quot;&gt;Go Back&lt;/a&gt;
    &lt;/form&gt;
    &lt;/Fragment&gt;
    );
  };
  
  CreateProfile.propTypes = {
    createProfile: PropTypes.func.isRequired
  };
  
  
  export default connect(null, { createProfile })(withRouter(CreateProfile));
  </code></pre>
  <p>and here is my profile.js in my actions folder:</p>
  <pre><code>import axios from 'axios';
  import { setAlert } from './alert';
  
  import {
      GET_PROFILE,
      PROFILE_ERROR
  } from './types';
  
  // Get current users profile
  export const getCurrentProfile = () =&gt; async dispatch =&gt; {
      try {
        const res = await axios.get('/api/profile/me');
  
        dispatch({
          type: GET_PROFILE,
          payload: res.data
        });
      } catch (err) {
        dispatch({
          type: PROFILE_ERROR,
          payload: { msg: err.response.statusText, status: err.response.status}
        });
      }
  };
  
  // Create or update profile
  export const createProfile = (formData, history, edit = false) =&gt; async dispatch =&gt; {
    try {
      const config = {
        headers: {
          'Contet-Type': 'application/json'
        }
      }
  
      const res = await axios.post('/api/profile', formData, config);
  
      dispatch({
        type: GET_PROFILE,
        payload: res.data
      });
  
      dispatch(setAlert(edit ? 'Profile Updated' : 'Profile Created'));
  
      if(!edit) {
        history.push('/dashboard');
      }
    } catch (err) {
      const errors = err.response.data.errors;
  
      if (errors) {
        errors.forEach(error =&gt; dispatch(setAlert(error.msg, 'danger')));
      }
  
      dispatch({
        type: PROFILE_ERROR,
        payload: { msg: err.response.statusText, status: err.response.status}
      });
    }
  }
  </code></pre>