5

I'm trying to automatically change the path after n seconds. (without using <Link to="/home">Home</Link> ).

My code looks like this:

class ComponentName extends Component {
  constructor (props, context) {
    super(props, context);
  }
  componentDidMount () {
    setTimeout(function(){
      this.context.router.transitionTo('/home');
    }.bind(this), 3000)
  }
  render() {return (<div>..will go to the home page</div>)}
}

ComponentName.contextTypes = {
  router: function () { 
    return React.PropTypes.func.isRequired;
  }
};
export default ComponentName;

This is the error I'm getting

Uncaught TypeError: Cannot read property 'transitionTo' of undefined on line this.context.router.transitionTo('/home'); aka this.context.router is undefined.

this.context is defined, so no problem there afaik.

Things I've tried some of the following:

  • In the constructor:
    • this.context = context;

  • In the class:
    • static contextTypes: {
  history: React.PropTypes.object,
  location: React.PropTypes.object,
  router: React.PropTypes.func.isRequired
}

  • Before exporting (tried with & without function):
    • ComponentName.contextTypes = {
  router: React.PropTypes.func.isRequired
}

  • I've also tried changing route to history, or just calling the function on the context:
    • this.context.history.transitionTo('/home');
this.context.transitionTo('/home');
this.transitionTo('/home');

    Fact is that this.context.router is still undefined, I've searched more threads (mainly this one: https://github.com/rackt/react-router/issues/975 ) on this and still couldn't find something that would work for me.

    Note: I'm using ES6 & 

    "react": "^0.14.0",
"react-router": "^1.0.0-rc3"
    Felix Kling
    • 795,719
    • 175
    • 1,089
    • 1,143
    Sanda
    • 1,357
    • 19
    • 29

    2 Answers2

    1

    There's already an answer explaining how to programmatically force a new route for every react-router version: https://stackoverflow.com/a/31079244/5810646

    You are (or should I use "were") trying to force a new route after 3 seconds on your page. It shouldn't be a history related problem, as the version of react-router you're using is 1.0.0-rc3 (which doesn't seem by the way looking at your code).

    You can leverage history to push a new route if you're using react-router 2.x.x:

    import { browserHistory } from 'react-router'

    And then doing:

    browserHistory.push('/some/path')
    iba
    • 503
    • 4
    • 16
    • Thanks for the answer & sorry: I thought I deleted this post. This was one of the early versions of react & a very old react-router version :'). I'm pretty sure all the code is outdated by now.. – Sanda Jan 31 '20 at 16:38
    • I answered anyway as SO suggested me the question, it could be useful if someone encounters the same problem, not sure though if it's ok to answer question this old. – iba Jan 31 '20 at 16:51
    • Yeah, you never know :). Thank you for the answer :). – Sanda Jan 31 '20 at 16:57
    -1

    One solution is to create your history in its own file and export it like so:

    import createHistory from 'history/createHashHistory'

export default createHistory()

    Then when you are defining your application you do this:

    import React from 'react'
import { Provider } from 'react-redux'
import { Router } from 'react-router-dom'

import history from '../history'

const Application = (props) => {
  return (
    <Provider store={props.store}>
      <Router history={history}>
        ...
      </Router> 
    </Provider>
  )
}

    And then finally, whenever you need to access history in any of your components, just import it from that same file you exported from to push your next route. See this post here for more information.

    Dude
    • 931
    • 6
    • 16