6

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 :)

Jyoti Duhan
  • 605
  • 10
  • 22

2 Answers2

10

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 :)

WilomGfx
  • 1,788
  • 1
  • 15
  • 24
  • what if one is already using below code to sync history with store? const reduxHistory = syncHistoryWithStore(browserHistory, store); – Jyoti Duhan Apr 27 '17 at 15:12
  • accepting the answer as it's very close to what I was looking for. In case one is not syncing browserHistory with store, push method of react-router-redux can be directly used to maintain routing history in store. – Jyoti Duhan May 02 '17 at 10:08
  • Is there any way we could navigate to the route `without` pushing to stack? – Kevin Ghaboosi Mar 13 '18 at 22:05
  • @KevinGhaboosi why would you need to do so ? – WilomGfx Mar 14 '18 at 01:32
  • 1
    In my web application, there are situations where users may choose to create a new object by going to a path like `../new` and then back or click other places. During multiple back presses, I noted that jumping to `../new` leaves a weird UX. Some of our users are also getting confused despite they know they had visited that particular page. Thus, I thought I prevent these pages from being cached so users are seeing a better user flow. – Kevin Ghaboosi Mar 14 '18 at 16:53
  • @KevinGhaboosi maybe something like this https://reacttraining.com/react-router/web/example/modal-gallery – WilomGfx Mar 28 '18 at 00:27
0

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

Akshay Vijay Jain
  • 6,159
  • 4
  • 31
  • 34