Reactjs 做点什么，然后改变路线

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

---

较长版本：

我有嵌套路由（不知道这是否会对手头的问题产生任何影响），在这里的一个非常小的（据我所知）示例中描述了该设置：

我想要一个按钮，它首先做一些事情，然后重新路由用户，因此我不能使用

链接

。首先我看到的是

使用

this.props.history.push（'/route'）

进行此操作

但后来我了解到，

this.props.history

不再是一件事，现在它是自己的npm包。我得到了一个关于如何实现我需要的东西的简单解释

---

我的问题的例子：

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>

现在这里的默认值是

HomeController

（包含两个按钮，链接到“关于”和“单击页面”），但是

/about

呈现

about

，如下所示：

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

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

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

然后

/单击页面

呈现

单击页面

，如下所示：

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

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

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

---

这就是问题的根源：(

因此，

单击页面

呈现以下内容：

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

历史记录

在本例中，是从另一个类似以下内容的文件导入的：

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

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

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

这是从我前面提到的

问题是，当我单击按钮时，我看到的是：

因此，函数被调用，它做了一些事情，然后它将“/推”到历史记录中，但什么也没有发生。为什么会这样？我需要强制

Home

重新加载吗

我用来重新创建该问题的完整示例代码如下：

首先

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

仍然存在于react-router4中。历史道具仅对路由器的直接子级可用

如果您的组件不是路由器的直接子组件，那么您可以使用withRouterHOC导出该组件，可以这样导入

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

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

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

---

要转到任何位置

您可以使用

this.history.push

在由

路由

呈现的任何组件中

---

这里的示例代码：

您可以这样做

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

render() {
...

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

从'react router'导入{Redirect}
...
render（）{
...
{fireRedirect&&(
)}

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

---

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

你能做一个Codesandbox示例，我来看看吗？当然！非常感谢！这里有一个副本链接：检查这个答案的可能副本@MrJalapeno这是你想要的行为吗？酷！在实现它的过程中，我想我可能也学会了使用

组件={ClickPage}

而不是

component={（）=>

。如果我只是删除

history={history}从

Router`并将其更改为this.props.history.push我得到一个错误，

props

没有历史。但是如果我将其更改为与您的代码完全相同的代码，它会正常工作。我会仔细看看还需要什么。是的，我建议使用

组件={component}

模式。如果有帮助，请随意标记为正确：）