CODEWITHSUNDEEP
reactjsreact-routerreact-router-redux
Jyoti Duhan
Jyoti Duhan

Reputation: 1094

What is the difference between "push" method from react-router-redux and "browserHistory" from react-router?

I am trying to update history in react when the user navigates from one page/route to another. But confused about what method I should use to achieve this and why?

import { browserHistory } from 'react-router'
browserHistory.push('/bag')

OR

import { routerMiddleware, push } from 'react-router-redux'
const middleware = routerMiddleware(browserHistory)
const store = createStore(
  reducers,
  applyMiddleware(middleware)
)

store.dispatch(push('/bag'))

Please help. Thanks in advance :)

Upvotes: 6

Views: 12403

Answers (2)

Akshay Vijay Jain
Akshay Vijay Jain

Reputation: 15945

There are two cases

  1. if you have integrated connected-react-router with your redux store, then it's push method, instructs history to change location, so the browser URL changes, however if instead you navigate using push from browserHistory, you are directly calling history to change location
    Next important thing to understand is with either of the method, connected-react-router's LOCATION_CHANGE action will be called and it will lead to appropriate component being rendered

so in essence there is no difference, the difference being calling push method of connected-react-router will call the push on the history internally

Upvotes: 0

WilomGfx
WilomGfx

Reputation: 2013

Essentially, if you understood the reason for you to use redux and react-router-redux :

store.dispatch(push('/bug')) is keeping the navigation state in the store, pushes and navigates to the route

whilst

browserHistory.push('/bag') just pushes and navigates to the route.

From the source code itself

/**
* These actions correspond to the history API.
* The associated routerMiddleware will capture these events before they get to
* your reducer and reissue them as the matching function on your history. */

export const push = updateLocation('push')

Id suggest looking into the source code when trying to understand differences or how things work. Its good for learning and also for deeply understanding whats going on with the libraries you're using :)

Upvotes: 10

Related Questions