时间戳

首页 > 解决方案 > ReactJS 上下文 API - 以编程方式重定向/导航

reactjs - ReactJS 上下文 API - 以编程方式重定向/导航

问题描述

index.js - 文件

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

在 Home 组件上，我有一个按钮，它的事件点击已成功发送到 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")但仍然失败。

标签： reactjsreact-router

解决方案

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

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

然后在 AppProvider 中使用 withRouter

export default withRouter(AppProvider);

在此之后您可以使用this.props.history.push('/balances)，注意区分大小写的路径名/balances而不是/Balances

有关更多详细信息，请参阅此问题How to Programmatically navigate using react-router

推荐阅读