Question

所以我使用React和Bootstrap并使用React-Router进行路由。

我有一个包含一些内容的页面（/bookmarks/21），当点击删除按钮时，它会打开一个模式，询问您是否要删除该页面。如果您单击否，我将使用基本的data-dismiss="modal"，这会将我带回页面而不会发生任何变化。但是，当您单击是时，项目将在后端删除，模式将关闭，但页面不会像我希望的那样重定向到主页面（/），但保留在/bookmarks/21没有内容在那里，因为它已被删除。我试图避免使用jQuery，但这是我当前的代码。

<Link to={'/'}>
  <button type="button" className="btn btn-default" onClick={() => this.onDelete(this.props.bookmarkId)} data-dismiss="modal">Yes</button>
</Link>

我看过文档推荐

$(".modal").on("hidden.bs.modal", function () {
windows.location = "your-url"; )};

但是，有没有办法用React-Router做到这一点？任何帮助将不胜感激！

Answer 1

import { Redirect } from 'react-router-dom'
this.setRedirect("/blah");

是您在路线中设置的。

Answer 2

这个问题是前一段时间的，但这是我最后要去做的事情以及如今我要继续做的事情。

您可以使用React Router添加的this.props.history对象并将路由推入数组。

例如：

handleClick = () => {
  this.handleDelete(bookmarkId)
  this.props.history.push('/blah')
}

然后使用按钮onClick

中的方法

使用React-Router关闭Bootstrap模式后重定向

2 个答案: