react-router-domとMaterial-UIを一緒に使うメモ

react-router@v4からパッケージが分離されたので、これからはreact-router-domを使おうとかで、react-routerからreact-router-domを使うことにした。

参考にしたサイト

React Router: Declarative Routing for React.js

React Router v4(next) が alphaからbetaになってぼちぼち変わってたので追従する - Qiita

Material-UI

react-routerでページ遷移にちょっとしたアニメーションを付ける | WebDesign Dackel

コードと結果

import React, { Component } from 'react'
import ReactDOM from'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import FlatButton from 'material-ui/FlatButton'
import { Home } from './home.js'
import { About } from './about.js'

class Action extends Component {
  render () {
    return (
      <Router>
        <div>
          <FlatButton label="home" containerElement={<Link to="/" />} />
          <FlatButton label="about" containerElement={<Link to="/about" />} />

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    )
  }
}

export { Action }

f:id:unecocc:20170607010457p:plain

解説

homeとaboutページをimportで読み込み。< Route/>でurlと表示するページのコンポーネントを設定。< FlatButton/>内に< Link/>を設定することでMaterial-UIの装飾が可能。

aboutページでリロードするとエラーになる。未解決。

// エラー内容
Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' appears in neither the style-src directive nor the default-src directive of the Content Security Policy.