Реагировать на проблему маршрутизатора, когда я щелкаю по ссылке, URL-адреса изменяются, но не отображаются ||Я использую React и Redux в приложении

Question

У меня есть разные ссылки в моем приложении.Некоторые из них работают хорошо, когда я прыгаю с одного на другого.При нажатии на некоторые из них они отображают этот компонент, но после, если я хочу перейти с этого маршрута на предыдущий или альтернативный маршрут, они не могут отображать компонент, просто меняют URL-адреса.Ниже приведен файл маршрута одного из разделов моего приложения, в котором возникла проблема.

 import React, { useEffect, Fragment } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { getCurrentUser } from "../../actions/profile";
 import Spinner from "../layouts/Spinner";
 import { Link } from "react-router-dom";
 import DashboardActions from "./DashboardActions";
 import Experience from "./Experience";
 import Education from "./Education";
 import { deleteAccount } from "../../actions/profile";

 const Dashboard = () => {
 const dispatch = useDispatch(() => getCurrentUser(), () => 
 deleteAccount());
 const profileUser = useSelector(state => state.profile);
 const auth = useSelector(state => state.auth);
 const { profile, loading } = profileUser;
 const { user } = auth;

 useEffect(() => dispatch(getCurrentUser()), [dispatch]);
return loading && profile === null ? (
  <Spinner />
 ) : (
  <Fragment>
  <h1 className='large text-primary'>Dashboard</h1>
  <p className='lead'>
    <i className='fa fa-user'></i>
    {"  "}Welcome {user && user.name}
  </p>
  {profile !== null ? (
    <Fragment>
      <DashboardActions />
      <Experience experience={profile.experience} />
      <Education education={profile.education} />
      <div className='my-2'>
        <button
          className='btn btn-danger'
          onClick={() => dispatch(deleteAccount())}
        >
          Delete My Account!!!
        </button>
      </div>
    </Fragment>
      ) : (
    <Fragment>
      <p>You have not yet setup profile, please add some info</p>
      <Link to='/create-profile' className='btn btn-primary'>
        Create Profile
      </Link>
    </Fragment>
  )}
  </Fragment>
    );
      };
   export default Dashboard;

Это компоненты, которые не визуализируют добавление опыта: -

 import React, { Fragment } from "react";
 import Moment from "react-moment";
 import { useDispatch } from "react-redux";
 import { deleteExperience } from "../../actions/profile";

 const Experience = ({ experience }) => {
 const dispatch = useDispatch(() => deleteExperience());
 const experiences = experience.map(exp => (
 <tr key={exp.id}>
  <td>{exp.company}</td>
  <td className='hide-sm'>{exp.title}</td>
  <td>
    <Moment format='YYYY-MM-DD'>{exp.from}</Moment>-
    {exp.to === null ? "Now" : <Moment format='YYYY-DD- 
   MM'>exp.to</Moment>}
  </td>
  <td>
    <button
      className='btn btn-danger'
      onClick={() => dispatch(deleteExperience(exp.id))}
    >
      Delete
    </button>
   </td>
  </tr>
 ));

return (
  <Fragment>
   <h2 className='my-2'>Experience Credentials</h2>
     <table className='table'>
       <thead>
      <tr>
        <th>Company</th>
        <th className='hide-sm'>Title</th>
        <th className='hide-sm'>Year</th>
        <th />
      </tr>
       </thead>
      <tbody>{experiences}</tbody>
    </table>
 </Fragment>
);

};экспорт по умолчанию Опыт;

Это Добавить компонент образования: -

   import React, { Fragment } from "react";
   import Moment from "react-moment";
   import { useDispatch } from "react-redux";
   import { deleteEducation } from "../../actions/profile";
   const Education = ({ education }) => {
   const dispatch = useDispatch(() => deleteEducation());
   const educations = education.map(edu => (
   <tr key={edu.id}>
    <td>{edu.school}</td>
     <td className='hide-sm'>{edu.degree}</td>
    <td>
     <Moment format='YYYY-MM-DD'>{edu.from}</Moment>-
     {edu.to === null ? "Now" : <Moment format='YYYY-DD- 
       MM'>edu.to</Moment>}
     </td>
     <td>
      <button
      className='btn btn-danger'
      onClick={() => dispatch(deleteEducation(edu.id))}
      >
       Delete
      </button>
     </td>
   </tr>
  ));
   return (
  <Fragment>
   <h2 className='my-2'>Education Credentials</h2>
    <table className='table'>
    <thead>
      <tr>
        <th>Schools</th>
        <th className='hide-sm'>Degree</th>
        <th className='hide-sm'>From</th>
      </tr>
    </thead>
    <tbody>{educations}</tbody>
   </table>
  </Fragment>
   );
  };
export default Education;

И это файл фактических действий, где ссылки для перехода.

       import React, { Fragment } from "react";
       import { Link, withRouter } from "react-router-dom";

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

 export default withRouter(DashboardActions);