ReactJS Context API - Redirect/Navigate programmatically

Question

index.js - file

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

On Home Component, I have a button and its event click was send to App Provider successfully.

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

And on AppProvider, I have a method like this.

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

ButI have no idea why all the redirection method failed.

I tried both of browserHistory.push('/Balances') and this.props.push("/Balances") but still failed.

this should help you out https://stackoverflow.com/questions/44127739/programmatically-navigate-using-react-router/44128108#44128108 — Shubham Khatri, Jun 29 '18 at 05:32

score 2 · Accepted Answer · answered Jun 29 '18 at 05:36

In order to use react-router functionality in AppProvider, your Router must wrap you AppProvider component and you AppProvider must receive the Router Props, you can do so like

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

and then in AppProvider use withRouter

export default withRouter(AppProvider);

After this you can use this.props.history.push('/balances), note the case sensitive pathname /balances and not /Balances

Refer this question for more details on How to Programmatically navigate using react-router

When I read your comment, I found my mistake. Just move the AppProvider inside BrowserRouter and it can use BrowserRouter props. Thank you, you made my day — Hai Tran, Jun 29 '18 at 06:31

ReactJS Context API - Redirect/Navigate programmatically

1 Answers1