Cuando el usuario haga clic en el icono EDIT , se abrirá una página. después de que el usuario submit el registro y, si tiene éxito, nuestra página debería redirigir al ListCertificate .
La siguiente línea se ejecutará cuando el usuario haga clic en el botón Editar. y se abrirá el formulario de edición.
<Link to={`/${props.certificate.id}/edit` }>Edit</Link> después de que el usuario haya guardado correctamente, nuestra página debería redirigir al componente ListCertificate .
así que lo estoy escribiendo
.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' /> })esta linea no funciona.
return <Redirect to='/listcertificate' />en app.js he llamado ListCertificate usando a continuación.
<Route path ="/listcertificate" component={Listcertificate} ></Route> localhost:4200/listcertificate funciona correctamente. pero no se redirigirá a la misma página desde editcomponent.
Con react-router-dom v6, puede usar useNavigate hook para navegar mediante programación. Documentos
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 en lugar de Redirect cuando no esté en JSX :
import {useHistory} from "react-router-dom" const history = useHistory(); history.push('/listcertificate'); Y si está usando la versión 6 de react-router-dom , puede usar useNavigate :
import {useNavigate} from "react-router-dom"; const navigate = useNavigate(); navigate("/listcertificate", { replace: true });Olvidaste agregar replace prop dentro de <Navigate/> .
La propiedad <Navigate replace> le dice al enrutador que use history.replaceState() al actualizar la URL para que la entrada / no termine en la pila de historial. Esto significa que cuando alguien haga clic en el botón Atrás, terminará en la página en la que estaba antes de navegar a / leer más
<Redirect to='/listcertificate' />
<Navigate to='/listcertificate' replace />
o a esto
<Navigate to='/listcertificate' replace={true} />