react-routerでコンポーネント外から画面遷移する(TypeScript版)

react-routerにはbrowserHistoryというものがあるので、それをimportして使えばいいよ！って書いてある。

github.com

しかし、型定義にそんなものはない。

じゃぁどうするの？

historyモジュールのcreateHistoryを呼んだものをグローバルに用意しておきます。

import {createHistory} from 'history';

export default createHistory();

それを、Routerタグに仕込みます。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import BrowserHistory from './actions/BrowserHistory';
import {Link, Router, Route, IndexRoute} from 'react-router';

MasterActionCreator.count();
MasterActionCreator.load(20, 0);

var routes = (
    <Router history={BrowserHistory}>
        ... 略 ...
    </Router>
);

あとは、それを使って任意の場所でpushなりなんなりすればOKです。

import BrowserHistory from './BrowserHistory';


BrowserHistory.push('/detail');