做某事，然后在反应中重新路由

Question

短版：当用户点击一个按钮时，我想做一些事情，然后重新路由用户。我该怎么做？

---

加长版：

我有嵌套路由（不知道这是否对手头的问题有任何影响）这是如何设置的>

我想要一个按钮，它首先做某事，然后重新路由用户，因此我不能使用Link。首先我看到的是

为此使用this.props.history.push('/route')

但后来我了解到this.props.history 不再是一个东西，现在它是自己的 npm 包。 Here我得到了一个关于如何实现我需要的简单解释。

---

我的问题示例：

App.js 渲染：

<Router history={history}>
  <div>          
    <Link to="/">
      <button>Go to home</button>
    </Link>
  <Switch>
    <Route exact path="/other" component={() => <Other/>} />
    <Route path="/" component={() => <Home/>} />
  </Switch>
  </div>
</Router>

有两个顶级路由，/other 的确切路径呈现 Other，如下所示：

以及呈现Home 的/ 的相对路径，如下所示：

Home 呈现这段代码：

<div>
  THIS IS HOME WOO!
  <div>
      <Route exact path="/" component={() => <HomeController/>} />
      <Route exact path="/about" component={() => <About/>} />
      <Route exact path="/click-page" component={() => <ClickPage/>} />              
  </div>
</div>

现在这里默认是HomeController（包含两个按钮，链接指向about和click-page），但/about呈现About，看起来像这样：

而/click-page 渲染ClickPage 看起来像这样：

---

这是问题开始的地方:(

所以ClickPage 呈现这个：

<button onClick={clickHandler}>
  DO SOMETHING THEN GO TO ABOUT
</button>

clickHandler 看起来像这样：

function clickHandler(){
  console.log("doing stuff");
  history.push('/about');
}

history 在这种情况下是从另一个看起来像这样的文件导入的：

// history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory({
/* pass a configuration object here if needed */
})

这是从我前面提到的answer逐个字符复制而来的。

问题是，当我点击按钮时，我看到的是这样的：

所以函数被调用，它做了一些事情，然后将“/about”推送到历史记录，但什么也没发生。为什么是这样？我需要强制Home 重新渲染吗？

我用来重新创建问题的完整示例代码在这里：pastebin-link

Answer 1

首先，

this.props.history.push('/route')

仍然存在于 react-router4 中。 history 属性仅对 Router 的直接子节点可用。

如果你的组件不是路由器的直接子组件，你可以使用 withRouter HOC 导出该组件，可以像这样导入

import {withRouter} from 'react-router-dom'

然后，点击按钮，你可以做你的事情，并使用

this.props.history.push('/route')

去任何地方

Answer 2

您可以在Route 呈现的任何组件中使用this.history.push。

此处的示例代码：https://codesandbox.io/s/w21m5mlvyw

Answer 3

你可以这样做..

import { Redirect } from 'react-router'
...

render() {
...

{fireRedirect && (
  <Redirect to={from || '/thank-you'}/>
)}

在您的用户操作完成后更新您的 fireRediect 状态

This 看起来像你需要的东西。