React + Redux React Router

前回に引き続き, React + Reduxを見ていきます。 今回は 前回のサンプルにReact Routerを導入します。 前回のサンプルはこちらをご覧ください。 (React + Redux とりあえず簡単な例から)

React Routerを導入

npm install --save react-router-dom

Versionは, 4.1.1 を使用。このバージョンが曲者っぽい。 4以下の書き方などは違う模様。 また, react-router というパッケージと react-router-dom は違うみたい。 前はreact-routerを使っていた気がするんだけどなぁ。 今回は, react-router-domを使います。

Container の作成

今回はもう1ページ用にもう一つContainerを作成します。Reduxの流れを作るのが面倒なので 簡単なComponentにしておきます。
containers/Page2.jsx

class Page2 extends React.Component {
   render() {
        return (
            

                Hello!
            
        );
    }
}

export { Page2 as default };

ただのSimpleなdivです。

React-Routerを入れる

前回作った部分を/appとして今回の部分を/memberと二つにします。 (コードは一部のみ)

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import AppContainer from './containers/AppContainer.jsx';
import Page2 from './containers/Page2.jsx';


ReactDOM.render(
  
      
          
            
            
          
      
  ,
    document.querySelector('.content')
);

前回と違うところは Prividerのしたのところに, RouterというタグとSwitchというタグ, その中に各ページの定義 Routeが入っています。 これで localhost:8080/app, localhost:8080/member で各ページが確認できます。