かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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