CODEWITHSUNDEEP
reactjsreact-router
anche
anche

Reputation: 2884

React router transitionTo, .substring is not a function

I have some simple components, and I want to use the router.transitionTo function. What am I doing wrong here:

const { Router,
        Route,
        IndexRoute,
        Redirect,
        Link,
        IndexLink
      } = ReactRouter

const Person = React.createClass({

  render() {
    return (
      <div>
      hihihi  
      </div>
    )
  }
})
const App = React.createClass({
  clickHandler() {
    this.context.router.transitionTo('/person/23')
  },
  render() {
    return (
      <div>
        <h1 onClick={this.clickHandler}>React Router Playground</h1>
        {this.props.children}
      </div>
    )
  }
})

App.contextTypes = {
  router: React.PropTypes.object.isRequired,
}

React.render((
  <Router>
    <Route path="/" component={App}/>
    <Route path="/person/:id" component={Person}/>
  </Router>
), document.getElementById('app'))

http://codepen.io/anon/pen/MyerXj?editors=001

Upvotes: 3

Views: 2589

Answers (1)

Krzysztof Sztompka
Krzysztof Sztompka

Reputation: 7204

In App component you have method:

  clickHandler() {
    this.context.router.transitionTo('/person/23')
  },

Please change it to:

  clickHandler() {
    this.context.router.push('/person/23')
  },

Working codepen: http://codepen.io/anon/pen/xVOabg

This is because actual version of react-router use router.push to change route

Upvotes: 3

Related Questions