My App Component is here

import React, { useEffect } from 'react'; import './App.css'; import Navbar from './components/layout/Navbar'; import Landing from './components/layout/Landing'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Login from './components/auth/Login'; import Register from './components/auth/Register'; import { Provider } from 'react-redux'; import store from './store'; import Alert from './components/layout/Alert'; import setAuthToken from './utils/setAuthToken'; import { loadUser } from './actions/auth'; import Dashboard from './components/dashboard/Dashboard'; import PrivateRoute from './components/routing/PrivateRoute'; import CreateProfile from './components/profile-form/CreateProfile'; import EditProfile from './components/profile-form/EditProfile'; import AddExperience from './components/profile-form/AddExperience'; import AddEducation from './components/profile-form/AddEducation';  if (localStorage.token) {   setAuthToken(localStorage.token); }  const App = () => {   useEffect(() => {     store.dispatch(loadUser());   }, []);   return (     <Provider store={store}>       <Router>         <>           <Navbar />           <Route exact path='/' component={Landing} />           <section className='container'>             <Alert />             <Switch>               <Route exact path='/login' component={Login} />               <Route exact path='/register' component={Register} />               <PrivateRoute exact path='/dashboard' component={Dashboard} />               <PrivateRoute                 exact                 path='/create-profile'                 component={CreateProfile}               />               <PrivateRoute                 exact                 path='/edit-profile'                 component={EditProfile}               />               <PrivateRoute                 exact                 to='/add-experience'                 component={AddExperience}               />               <PrivateRoute                 exact                 path='/add-education'                 component={AddEducation}               />             </Switch>           </section>         </>       </Router>     </Provider>   ); };  export default App;  

My AddExperience Component is here

import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { addExperience } from '../../actions/profile'; import { Link, withRouter } from 'react-router-dom';  const AddExperience = ({ addExperience, history }) => {   const [formData, setFormData] = useState({     company: '',     title: '',     location: '',     from: '',     to: '',     current: false,     description: '',   });   const [toDateDisabled, toggleDisabled] = useState(false);   const { company, title, location, from, to, current, description } = formData;    const onChange = (e) => {     setFormData({ ...formData, [e.target.name]: e.target.value });   };    return (     <>       <h1 className='large text-primary'>Add An Experience</h1>       <p className='lead'>         <i className='fas fa-code-branch'></i> Add any developer/programming         positions that you have had in the past       </p>       <small>* = required field</small>       <form         className='form'         onSubmit={(e) => {           e.preventDefault();           addExperience(formData, history);         }}       >         <div className='form-group'>           <input             type='text'             placeholder='* Job Title'             name='title'             value={title}             onChange={(e) => onChange(e)}             required           />         </div>         <div className='form-group'>           <input             type='text'             placeholder='* Company'             name='company'             value={company}             onChange={(e) => onChange(e)}             required           />         </div>         <div className='form-group'>           <input             type='text'             placeholder='Location'             name='location'             value={location}             onChange={(e) => onChange(e)}           />         </div>         <div className='form-group'>           <h4>From Date</h4>           <input             type='date'             name='from'             value={from}             onChange={(e) => onChange(e)}           />         </div>         <div className='form-group'>           <p>             <input               type='checkbox'               name='current'               checked={current}               value={current}               onChange={(e) => {                 setFormData({ ...formData, current: !current });                 toggleDisabled(!toDateDisabled);               }}             />{' '}             Current Job           </p>         </div>         <div className='form-group'>           <h4>To Date</h4>           <input             type='date'             name='to'             value={to}             onChange={(e) => onChange(e)}             disabled={toDateDisabled ? 'disable' : ''}           />         </div>         <div className='form-group'>           <textarea             name='description'             cols='30'             rows='5'             placeholder='Job Description'             value={description}             onChange={(e) => onChange(e)}           ></textarea>         </div>         <input type='submit' className='btn btn-primary my-1' />         <a className='btn btn-light my-1' href='dashboard.html'>           Go Back         </a>       </form>     </>   ); };  AddExperience.propTypes = {   addExperience: PropTypes.func.isRequired, };  export default connect(null, { addExperience })(AddExperience); 

Here is my AddEducation Component

import React, { useState, Fragment } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { addEducation } from '../../actions/profile'; import { Link, withRouter } from 'react-router-dom';  const AddEducation = ({ addEducation, history }) => {   const [formData, setFormData] = useState({     school: '',     degree: '',     fieldofstudy: '',     from: '',     to: '',     current: false,     description: '',   });   const [toDateDisabled, toggleDisabled] = useState(false);   const {     school,     degree,     fieldofstudy,     from,     to,     current,     description,   } = formData;    const onChange = (e) => {     setFormData({ ...formData, [e.target.name]: e.target.value });   };    return (     <Fragment>       <h1 className='large text-primary'>Add Your Education</h1>       <p className='lead'>         <i className='fas fa-code-branch'></i> Add any School or bootcamp that         you have attended       </p>       <small>* = required field</small>       <form         className='form'         onSubmit={(e) => {           e.preventDefault();           addEducation(formData, history);         }}       >         <div className='form-group'>           <input             type='text'             placeholder='* School or Bootcamp'             name='school'             value={school}             onChange={(e) => onChange(e)}             required           />         </div>         <div className='form-group'>           <input             type='text'             placeholder='* Degree or Certificate'             name='degree'             value={degree}             onChange={(e) => onChange(e)}             required           />         </div>         <div className='form-group'>           <input             type='text'             placeholder='fieldofstudy'             name='fieldofstudy'             value={fieldofstudy}             onChange={(e) => onChange(e)}           />         </div>         <div className='form-group'>           <h4>From Date</h4>           <input             type='date'             name='from'             value={from}             onChange={(e) => onChange(e)}           />         </div>         <div className='form-group'>           <p>             <input               type='checkbox'               name='current'               checked={current}               value={current}               onChange={(e) => {                 setFormData({ ...formData, current: !current });                 toggleDisabled(!toDateDisabled);               }}             />{' '}             Current Job           </p>         </div>         <div className='form-group'>           <h4>To Date</h4>           <input             type='date'             name='to'             value={to}             onChange={(e) => onChange(e)}             disabled={toDateDisabled ? 'disable' : ''}           />         </div>         <div className='form-group'>           <textarea             name='description'             cols='30'             rows='5'             placeholder='Programme Description'             value={description}             onChange={(e) => onChange(e)}           ></textarea>         </div>         <input type='submit' className='btn btn-primary my-1' />         <a className='btn btn-light my-1' href='dashboard.html'>           Go Back         </a>       </form>     </Fragment>   ); };  AddEducation.propTypes = {   addEducation: PropTypes.func.isRequired, };  export default connect(null, { addEducation })(AddEducation);  

And Lastly here is the DashboardActions Component

import React from 'react'; import { Link } from 'react-router-dom';  const DashboardActions = () => {   return (     <div className='dash-buttons'>       <Link to='/edit-profile' className='btn btn-light'>         <i className='fas fa-user-circle text-primary' /> Edit Profile       </Link>       <Link to='/add-experience' className='btn btn-light'>         <i className='fab fa-black-tie text-primary' /> Add Experience       </Link>       <Link to='/add-education' className='btn btn-light'>         <i className='fas fa-graduation-cap text-primary' /> Add Education       </Link>     </div>   ); };  export default DashboardActions;  

The Problem is When i Click on AddExperience it opens correctly with correct url but when i click on AddEducation it Opens the same Add Experience Form but url changed Correctly.