react-router を使った遷移の話

キンドルセール情報のサイトでreact-routerを使ってホーム画面と検索画面の遷移を作成したのでメモ。

はまったのは検索画面のURLが直接叩かれても、正しい検索結果を返さなければならないところ、普通にやるとサーバサイドのURLはホーム画面しかないので検索画面のURLを入力しても404になってしまう。

ホーム画面

検索結果画面

そこでreact-routerの処理だけでなく、railsの方にも同じURLを登録すると、ホーム->検索画面といったノーマルな遷移だけでなく、検索画面URLが直接叩かれたり、ブラウザの戻るににも対応できる。

rails側 config/routes.rbに設定しURLを有効にする

ここで重要なのは/booksで受け取ったものはホーム画面と同じパスに渡して、ルーティング処理はフロントのreact-routerに任せるところ。

root 'main#index' # ホーム画面
get '/books', to: 'main#index' # 検索結果画面

react側のルーティング処理 

import React from 'react';
import ReactDOM from 'react-dom';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Sales from './components/sales.jsx';
import Books from './components/books.jsx';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { IndexRoute, Link, Router, Route, browserHistory } from 'react-router';

export default class Main extends React.Component {

  constructor(props) {
    super(props);
    injectTapEventPlugin();
  }

  render() {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
        <div>
          <Header query={this.props.location.query}/>
          { this.props.children }
          <Footer />
        </div>
      </MuiThemeProvider>
    );
  }
}

ReactDOM.render((
  <Router history={browserHistory} >　
    <Route path="/" component={Main}>
      <IndexRoute component={Sales} />
      <Route path="/books" component={Books} />
    </Route>
  </Router>
  ), document.getElementById('app'),
);

なかなかWebにぴったりの情報がなくてはまったが、これでうまくいき検索結果がブックマークできるようになった。