How to navigate outside of components in ReactRouter 4?

[RamYadlapalli]

In React Router (v3) I can accept a server response and use browserHistory.push to go to the appropriate response page. However, this isn't available in v4, and I'm not sure what the appropriate way to handle this is in React-Router V4 .

In below example when the server returns a success, the user is taken to the Cart page

// actions/index.js
export function addProduct(props) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
      .then(response => {
        browserHistory.push('/cart'); // no longer in React Router V4
      });
}

How can I make a redirect to the page from function in React Router v4?

I can find lot of references on navigation from components in my case i need to navigate from a function

[erikshestopal]

@RamYadlapalli Here is one possible solution that I have found to work, although not ideal and definitely needs to be addressed in the core package. This is, of course, if you are using react-router-redux as well.

Given the following code, you can redirect to a different route by dispatching a push action.

import axios from 'axios'
import { push } from 'react-router-redux'
import { API_URL } from '../utils/apiUrl'

export const loginUser = creds => {
  return dispatch => {
    dispatch(loginRequest(creds))

    axios({
      method: "post",
      url: API_URL + "/auth_token",
      data: { auth: creds }
    }).then(res => {

       dispatch(push('/home')) /* dispatch an action that changes the browser history */ 

      })

    }).catch(err =>
      dispatch(loginFailure('Wrong email/password combination'))
    )
  }
}

I have looked and not found any other ways to do this yet. This becomes very messy because in your components, you will have callback functions on links if you want to change the route, like so:

<button className="btn btn-secondary btn-block"
    onClick={() => this.props.dispatch(push('/'))}>Home Page
</button>

If anyone has better ways of doing this, please share!

[erikshestopal]

@anuragasaurus But if you are working outside of a component, there is no history object as far as I can tell, no? I think that's a valid way of redirecting when working with components, but I don't see how that will work outside of a component.

[erikshestopal]

@anuragasaurus When using react-router-redux, the suggested mention does not seem to work. The URL is changed, but the new component is not loaded because the redux state has not been updated. In order to change the state, you would have to dispatch an action as I have suggested.

@ThisIsErik yeah, i tried it without using react-router-redux and it worked.

[erikshestopal]

@anuragasaurus But it doesn't work with react-router-redux, correct?

[timdorr]

You can build your own history instance and pass it to <Router>. This is all that BrowserRouter and the others like it do: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

[mrobrian]

If I'm understanding the suggestion correctly, if we need to access the history object outside of a component we basically have to create our own version of BrowserRouter and have it use a history object we've created. Wouldn't it be easier on users of this package if those history objects were available like they used to be, rather than having to create a slightly modified version of something that's already done?

[timdorr]

No, because they were singletons and that was sort of an anti-pattern. We had to have escape hatches with useRouter(). When you import a module, you shouldn't be getting an instance, but a class/function/constant definition.

[wdjungst]

If you are outside of a route you can wrap your component in withRouter to get the history object.

[kjs3]

I have multiple separate react apps on a page where each one can change the location and moving to RR4 obviously broke this. I made my own version of BrowserRouter that accepts a history prop and uses it if given. Otherwise it's identical. So now I can create a history outside of each app and pass it in to the respective CustomBrowserRouters.

@timdorr, would a PR with ☝️ that be welcome or do you not want people to be able to provide history? Am I missing something here that will come back to bite me?

[timdorr]

No, we don't want people providing a history to the preconfigured Routers. Just use <Router history={myHistory}>.

[timdorr]

Also, we're going to warn if you try to pass a history into the preconfigured Routers: #5151

[kjs3]

Ok cool.

[Huxpro]

@wdjungst I tried so many ways and I found withRouter is the easiest and most reasonable way to reach the history object. Thank you!