react-blessedでreact-router v4を使用する方法について

公開日:2018-12-10
最終更新:2018-12-10

概要

https://github.com/sqlectron/sqlectron-term のソースを参考にreact-routerの設定を試みてみましたが、

v4以降はAPIが変更されているようで、そのままではうまくいかなかったため、使用法を調査しました。

設定

非ブラウザ環境では、MemoryRouterを使う。

initialEntriesは、ヒストリスタックを初期化するために使用する。

initialIndexは、initialEntriesの配列から初期表示時に有効化されるロケーションを指定するために使用する。

import { MemoryRouter, Route } from 'react-router';  
import React, { Component } from 'react';  
import { Provider } from 'react-redux';  
import { createBlessedRenderer } from 'react-blessed';  
import blessed from 'neo-blessed';  

// 各コンポーネント・ストアをインポート  
import App from './containers/app';  
import ConfigForm from './containers/config-form';  
import Database from './containers/database';  
import configureStore from './store';  

const screen = blessed.screen({ ... });  
const store = configureStore(...);  
const render = createBlessedRenderer(blessed);  

render(  
  <Provider store={store}>  
    <MemoryRouter initialIndex={0} initialEntries={['/connection']}>  
      <App>  
        <Route path='/connection' component={ConfigForm} />  
        <Route path='/database' component={Database} />  
      </App>  
    </MemoryRouter>  
  </Provider>,  
  screen  
);  

参考

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@uki00aの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする