refreshing react component after navigation doesn't work - reactjs

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');
});
};