无法在反应中重定向到主页

Question

当用户点击EDIT 图标时，将打开一个页面。在用户submit 记录之后，如果成功，我们的页面应该重定向到ListCertificate。

当用户点击编辑按钮时，下面的行将运行。并打开编辑表单。

<Link to={`/${props.certificate.id}/edit` }>Edit</Link>

用户保存成功后，我们的页面应该重定向到ListCertificate组件。

所以我写了

 .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'  />
    })

这条线不工作。

return <Redirect  to='/listcertificate'  />

在 app.js 中，我使用下面的方法调用了 ListCertificate。

<Route  path ="/listcertificate" component={Listcertificate} ></Route>

localhost:4200/listcertificate 工作正常。但它也没有从editcomponent重定向到同一页面。

Answer 1

使用react-router-dom v6，您可以使用useNavigate 挂钩以编程方式进行导航。 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 });
    })

Answer 2

当您不在JSX 时，使用useHistory 而不是Redirect：

import {useHistory} from "react-router-dom"

const history = useHistory();
history.push('/listcertificate');

如果你使用的是react-router-dom的第6版，你可以使用useNavigate：

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

Answer 3

您忘记在<Navigate/> 中添加replace 属性。

<Navigate replace> 属性告诉路由器在更新 URL 时使用history.replaceState()，这样 / 条目就不会出现在历史堆栈中。这意味着当有人点击后退按钮时，他们最终会回到他们导航到/ read more

之前的页面

改变这个

<Redirect to='/listcertificate' />

到这里

<Navigate to='/listcertificate' replace />

或者到这个

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