使用 React-Router 关闭引导模式后重定向答案

【问题标题】：Redirecting after Closing Bootstrap Modal using React-Router使用 React-Router 关闭引导模式后重定向
【发布时间】：2016-12-19 22:03:24
【问题描述】：

所以我使用带有 Bootstrap 的 React 和带有 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 做到这一点？任何帮助将不胜感激！

【问题讨论】：

标签： javascript twitter-bootstrap reactjs modal-dialog react-router

【解决方案1】：

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

blah 是您在路线中设置的内容。

【讨论】：

【解决方案2】：

这个问题是不久前提出的，但这是我最终要解决的问题，也是我现在继续要解决的问题。

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

例如：

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

然后使用按钮onClick中的方法

【讨论】：