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

Question

简短版本：当用户点击按钮时，我想做某事，然后重新路由用户。我该怎么做？

更长的版本：

我有嵌套路线（不知道这对手头的问题是否有任何影响）这是如何设置的，这里有一个非常小的（据我所知）示例：link to SO question < / p>

我想要一个按钮，首先执行某些操作，然后重新路由用户，因此我无法使用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，如下所示：

以及呈现/的{​​{1}}的相对路径，如下所示：

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> （包含两个按钮，其中包含指向about和click-page的链接），但HomeController呈现/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

是从前面提到的answer中复制的字符。

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

因此调用该函数，它执行某些操作，然后将“/ about”推送到历史记录，但没有任何反应。为什么是这样？我是否需要强制// history.js import { createBrowserHistory } from 'history' export default createBrowserHistory({ /* pass a configuration object here if needed */ }) 重新投降？

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

Answer 1

首先是，

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

仍然存在于react-router4中。历史道具只适用于路由器的直接子项。

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

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

然后，点击按钮，你可以做你的东西，并使用

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

去任何地方

Answer 2

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

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

Answer 3

你可以这样做..

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

render() {
...

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

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

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