はまったのは検索画面の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にぴったりの情報がなくてはまったが、これでうまくいき検索結果がブックマークできるようになった。
