No able to redirect to home page with React Router Dom

user_9893677 0
Viewed 798

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.

react-router typescript reactjs javascript
3 Answers

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

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 React Router Dom v6, use useNavigate:

 import {useNavigate} from "react-router-dom";
 
 const navigate = useNavigate();
 
 navigate("/listcertificate", { replace: true });
user_152886410

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

Change this

<Redirect to='/listcertificate' />

To this

<Navigate to='/listcertificate' replace />

or to this

<Navigate to='/listcertificate' replace={true} />

user_97815620
Related