Проблема маршрутизации: this.context.router не определен при попытке перенаправления

Question

Я пытаюсь автоматически изменить путь через n секунд. (без использования <Link to="/home">Home</Link>).

Мой код выглядит следующим образом:

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; 

Это ошибка, я получаю

Uncaught TypeError: Cannot read property 'transitionTo' of undefined на линии this.context.router.transitionTo('/home'); ака this.context.router не определено.

этот. Текст определен, поэтому никаких проблем нет afaik.

Вещи я попробовал некоторые из следующих действий:

В конструкторе:

this.context = context; 

В классе:

static contextTypes: { 
    history: React.PropTypes.object, 
    location: React.PropTypes.object, 
    router: React.PropTypes.func.isRequired 
} 

перед экспортом (пробовал с & без функции):

ComponentName.contextTypes = { 
    router: React.PropTypes.func.isRequired 
} 

Я также попытался изменить маршрут к истории, или просто вызвать функцию на контекст:

this.context.history.transitionTo('/home'); 
this.context.transitionTo('/home'); 
this.transitionTo('/home'); 

Факт в том, что this.context.router до сих пор не определен, Я искал больше потоков (в основном этот: https://github.com/rackt/react-router/issues/975), и до сих пор не мог найти что-то, что сработало бы для меня.

Примечание: Я использую ES6 &

"react": "^0.14.0", 
"react-router": "^1.0.0-rc3" 

Answer 1

Одно решение создать историю в своем собственном файле и экспортировать его как так:

import createHistory from 'history/createHashHistory' 

export default createHistory() 

Затем, когда вы определяете приложение вы делаете это:

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

И наконец, когда вам нужно получить доступ к истории i n любой из ваших компонентов, просто импортируйте его из того же файла, который вы экспортировали, чтобы нажать следующий маршрут. См. Это сообщение here для получения дополнительной информации.