React-router: PushState undefined

[rubenhazelaar]

I have a problem with 1.0.0-rc3, installed through npm. The code below produces:

Uncaught TypeError: Cannot read property 'pushState' of undefined

I have installed [email protected] (& 5) separately.

var h = require('history/lib/createBrowserHistory')();

render(
<Router history={h}>
    <Route path="/" component={Dashboard}>
        <Route path="/campaigns" component={Campaigns}/>
    </Route>
</Router>,
document.getElementById('root')
);

I have also tried the following:

 var h = require('history').createHistory();

But no difference.

[taion]

pushState would be getting called from your code from something you're not showing there - make sure you're e.g. pulling in context types correctly.

[rubenhazelaar]

Can you give an short example of this? I'm new to react :)

[taion]

Try following one of the examples and modifying it to suit your needs.

[knowbody]

see the master-detail example

[rubenhazelaar]

Thank you for your help, do you mean the mixins: [History] parts? I see some this.history.pushStates as well. Which I believe is made available by registering it as a mixin, correct?

[taion]

Here's some documentation on React context: https://facebook.github.io/react/docs/context.html

I'd suggest working through a React tutorial or starting with a boilerplate to get a sense of how things work together. This issue tracker is not really a good venue for learning broadly how to use React.

[rubenhazelaar]

I understand, thank you!

[knowbody]

@rubenhazelaar just to give you a quick tip, if you are using classes then you can make use of context (which @taion already pointed you to). history will be available there (first you need to define contextTypes on top of your component) and you can use it like: this.context.history.pushState(null, '/somepath')

[rubenhazelaar]

Thanks @knowbody, I understand than that I was wrong to assume that clicking a Link component would switch out one component for the other (throught {this.props.children}), right?

[knowbody]

that's what would happen

[shangsunset]

Hi,
Im in the process of updating to 1.0.0-rc3 from 0.13, and also getting the same error. i did as the upgrade guide showed to switch out this.transitionTo:

import { Link, History } from 'react-router';

class UserForm extends React.Component {
  mixins: [History]

  handleDelete() {
    $.ajax({
      //...
      success: (res) => {
        this.history.pushState(null, '/somepath');
     }
    });
  }

if i use createBrowserHistory from history module, and do like this: const history = createBrowserHistory(); ... history.pushState(null, '/somepath');, the route will be changed but the browser wont direct to the changed route.

is context necessary for using History mixin? the examples given by react-router dont use it. so im a bit confused here. thanks.