When user is clicking on EDIT icon one page will be opened. after user submit the record and if it is successful our page should come redirect to the ListCertificate.
below line will run when user click on edit button. and edit form will be opened.
<Link to={`/${props.certificate.id}/edit` }>Edit</Link>
after user saved successfully our page should redirect to ListCertificate component.
so I am writing it
.then(function (response: any) {
console.log(response);
toast("🦄 Record updated successflly", {
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined
});
return <Redirect to='/listcertificate' />
})
this line is not working.
return <Redirect to='/listcertificate' />
in app.js I have called ListCertificate using below.
<Route path ="/listcertificate" component={Listcertificate} ></Route>
localhost:4200/listcertificate is working properly. but it is nor getting redirect to the same page from editcomponent.
With react-router-dom v6, you can use useNavigate hook for navigate programmatically. Docs
import { useNavigate } from "react-router-dom";
..
const navigate = useNavigate();
...
.then(function (response: any) {
console.log(response);
toast("🦄 Record updated successflly", {
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined
});
navigate("/listcertificate", { replace: true });
})
Use useHistory instead of Redirect when you are not in JSX :
import {useHistory} from "react-router-dom"
const history = useHistory();
history.push('/listcertificate');
And if you are using version 6 of react-router-dom, you can use useNavigate :
import {useNavigate} from "react-router-dom";
const navigate = useNavigate();
navigate("/listcertificate", { replace: true });
You forgot to add replace prop inside <Navigate/>.
The <Navigate replace> prop tells the router to use history.replaceState() when updating the URL so the / entry won't end up in the history stack. This means that when someone clicks the back button, they'll end up at the page they were at before they navigated to / read more
<Redirect to='/listcertificate' />
<Navigate to='/listcertificate' replace />
or to this
<Navigate to='/listcertificate' replace={true} />