React-redux-starter-kit: browserHistory.push() not updating router state

Created on 6 Apr 2016 · 6Comments · Source: davezuko/react-redux-starter-kit

I'm doing this in a component:

import { browserHistory } from 'react-router'
...
browserHistory.push(`/route/${someParam}`)

The URL in the address bar gets updated without any problem, however, in the mapStateToProps of the component's parent view, ownProps.location and ownProps.params are not updated – they still contain the old location's data.

I've read https://github.com/davezuko/react-redux-starter-kit/pull/541 and have updated the kit to contain the current latest versions of main.js, configureStore.js, and rootReducer.js, as well as updated the affected Node modules, but the issue persists.

I've seen suggested the use of this.context.router instead, but my this.context does not contain a router, so this might have been outdated information.

I do have a history in ownProps which seems to expose methods such as push, however, when I use that, I receive a deprecation warning.

Does anyone know what's the current state of this, and what is the desired way of performing a navigation with proper state updates from within a component?

Thanks in advance, guys.

Source

gaborluk

Most helpful comment

For context, make sure you're defining contextTypes or you won't actually have access to it. Just tested:

export class HomeView extends React.Component<void, Props, void> {
  static propTypes = {
    counter: PropTypes.number.isRequired,
    doubleAsync: PropTypes.func.isRequired,
    increment: PropTypes.func.isRequired
  };

  static contextTypes = {
    router: PropTypes.object,
  };

  _handleNavigate () {
    this.context.router.push('/foo')
  }

// ...

And it works as expected. Not sure why the changes made by browserHistory.push are not reflected in the store, since I thought react-router-redux was supposed to sync. Give the example above a shot first, though.

davezuko on 6 Apr 2016

👍10

All 6 comments

For context, make sure you're defining contextTypes or you won't actually have access to it. Just tested:

export class HomeView extends React.Component<void, Props, void> {
  static propTypes = {
    counter: PropTypes.number.isRequired,
    doubleAsync: PropTypes.func.isRequired,
    increment: PropTypes.func.isRequired
  };

  static contextTypes = {
    router: PropTypes.object,
  };

  _handleNavigate () {
    this.context.router.push('/foo')
  }

// ...

davezuko on 6 Apr 2016

👍10

Adding

static contextTypes = {
  router: PropTypes.object,
};

as @davezuko says worked for me.

agoransson on 7 Apr 2016

👍3

Awesome. Going to close this as I'm convinced it's just misunderstandings of various API's and not directly related to this project.

davezuko on 7 Apr 2016

Indeed, I merely needed this snippet, I somehow missed that part. Thank you both for the help, gentlemen.

gaborluk on 7 Apr 2016

@davezuko thanks a lot

ohcrider on 18 Aug 2016

I was having the same issue with ownProps not updating params on redux connect mapStateToProps function.

I changed from returning a function to returning an object and browserHistory.push worked as expected

// NOT WORKING returning function 
const mapStateToProps = (_state, ownProps) => {
  return (state) => {
    return {
       something: state.something[ownProps.params.id];
    }
  }
}

// WORKING returning object 
const mapStateToProps = (_state, ownProps) => {
  return {
     something: state.something[ownProps.params.id];
  }
}