javascript 无法使用React Router Dom重定向到主页

dhxwm5r4 于 2023-04-10 发布在 Java

关注(0)|答案(3)|浏览(178)

当用户点击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重定向到相同的页面。

JavaScript

来源：https://stackoverflow.com/questions/70244246/no-able-to-redirect-to-home-page-with-react-router-dom

3条答案

按热度按时间

mlnl4t2r1#

通过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 });
    })

赞(0）回复(0）举报 2023-04-10

0md85ypi2#

你忘了在<Navigate/>里面添加replace prop 。

<Navigate replace> prop告诉路由器在更新URL时使用history.replaceState()，这样/条目就不会出现在历史堆栈中。这意味着当有人单击后退按钮时，他们将出现在他们导航到/ * read more之前的页面。

更改此

<Redirect to='/listcertificate' />
对这个
<Navigate to='/listcertificate' replace />

或这个

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

赞(0）回复(0）举报 2023-04-10

toe950273#

如果不在JSX中，请使用useHistory而不是Redirect：

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

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

如果你使用的是React Router Dom v6，使用useNavigate：

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

赞(0）回复(0）举报 2023-04-10

我来回答

javascript 无法使用React Router Dom重定向到主页

3条答案

更改此

相关问题

热门标签

最新问答