かずきのBlog@hatena

日本マイクロソフトに勤めています。このブログは個人ブログなので、ここに書いている内容は個人的な意見で会社の公式見解ではない点にご注意ください。好きなものは XAML と C# 。苦手なものは型の無い言語です。

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');