refreshing react component after navigation doesn't work

Question

refreshing react component after navigation I wanted to refresh my component, which has a table . After navigating to that page but nothing happened since the useeffect doesn't work. Actually, there is a delete button ,once click on it it should remove some data and redirect to a component and refresh the component. CrudDemo function:

function CrudDemo(props) {
  const navigate=useNavigate();
  const location = useLocation();

//it runs for firsttime ,due to having second parameter as empthy array
  useEffect(()=>{
    debugger;
axios.get('http://localhost:60359/api/person/getpersons').then((res)=>{

 const ResponseData=res.data;

  setPersonList(ResponseData);

})
  },[])

    
 
  const [PersonList, setPersonList] = useState();
  const [ShouldRefresh, setShouldRefresh] = useState(false);

  return (
    <div className="app">
      <h2>All students <span role="img" aria-labelledby="love">📫</span>
</h2>
      <button type="button" className="btn btn-info"onClick={() => navigate('/SavePerson/')}>Add Person</button> 


      <table className="table" >
              <TableHeader></TableHeader>
              <tbody>
              {PersonList&&PersonList.map((student,i) => {
         return (
           
          <TableRow key={student.id} obj={student}></TableRow>
                

         );
      })}

</tbody>

            </table>

    </div>
  );
    }
export default CrudDemo;

and navigation code:

  navigate('/CrudDemo/');

and inside crudCompnent there is a TableRow component:

function TableRow(props) {

  return (
    <tr >
    <th>{props.obj.id}</th>
    <th>{props.obj.personName}</th>
    <th>
    { //Check if message failed
        (props.obj.city!=null&&props.obj.city.name.length >0)
          ? <div> {props.obj.city.name}  </div> 
          : <div> </div> 
      }
</th>
    <th>{props.obj.personPhoneNumber}</th>
    <th>
      <TableAction id={props.obj.id}></TableAction>
    </th>
        </tr>

  );
}

export default TableRow

and inside it there is a tableAction which responsible for redirect after delete action:

function TableAction(props) {
const navigate=useNavigate();


const handleClick = (e) => {
  axios.get('http://localhost:60359/api/person/DeletePerson/'+props.id).then((res)=>{
    
    const ResponseData=res.data;
    console.log('person deleted message :',ResponseData);
    navigate('/CrudDemo/');

   //navigate('/home');
   })
};



  return (
    <div>
<button type="button" className="btn btn-info"onClick={() => navigate('/PersonDetail/'+props.id,{state:{id:props.id}})}>Details</button> 
<button type="button" className="btn btn-danger"onClick={handleClick}>Delete</button> 
    </div>

); }

export default TableAction

to sum up ,there is a crudComponent which present data Table and inside it there is a tableRow component which responsible for showing each row and inside it there is a tableaction component which responsible for delete each row and redirect to crudComponent .Beside problem is that after redirection crudComponent isn't refreshed.

Answer 1

I handle it this way.Added location.state as a dependency in useEffect and send a state to it.

 function CrudDemo(props) {
    const navigate=useNavigate();
    const location = useLocation();
    
    //it runs for firsttime ,due to having second parameter as empthy array
    useEffect(()=>{
       debugger;
       axios.get('http://localhost:60359/api/person/getpersons')
          .then((res)=>{
              const responseData=res.data;
              setPersonList(responseData);
          });
    },[location.state]);

and in another component:

   const handleClick = (e) => {
      axios.get('http://localhost:60359/api/person/DeletePerson/'+props.id)
         .then((res)=>{
             const ResponseData=res.data;
             console.log('person deleted message :',ResponseData);
             navigate('/CrudDemo/',{state:{refresh:true}});
             //navigate('/home');
         });
    };