Question

index.js-文件

<AppProvider>
    <BrowserRouter>
        <div>
          <Route exact path="/" component={Home} />
          <Route exact path="/balances" component={Balances} />
        </div>
    </BrowserRouter>
</AppProvider>

在Home Component上，我有一个按钮，它的事件单击已成功发送到App Provider。

   <button className="btn btn-primary">{context.Process_ToBalances}</button>

在AppProvider上，我有一个像这样的方法。

Process_ToBalances()
{
   //pre process data
   // Redirect to Balance page here
}

但是我不知道为什么所有重定向方法都失败了。

我同时尝试了browserHistory.push('/Balances')和this.props.push("/Balances")，但还是失败了。

Answer 1

为了在AppProvider中使用react-router功能，您的路由器必须包装您的AppProvider组件，并且您的AppProvider必须接收路由器道具，您可以这样做

then(e => {

      dispatch({type: ADD_POST_SUCCESS, payload: e});
      dispatch(showMessage(e));
      setTimeout(() => {
        history.push("/");
        dispatch({type: CLEAR_MESSAGE});
      }, 2000);

    });

，然后在AppProvider中与Router一起使用

<BrowserRouter>
    <AppProvider>
        <div>
          <Route exact path="/" component={Home} />
          <Route exact path="/balances" component={Balances} />
        </div>
    </AppProvider>
</BrowserRouter>

此后，您可以使用export default withRouter(AppProvider);，请注意区分大小写的路径名this.props.history.push('/balances)而不是/balances

有关此问题，请参见How to Programmatically navigate using react-router

ReactJS Context API-以编程方式重定向/导航

1 个答案: