React Routerサーバサイドレンダリング

Question

私はこれを達成する良い方法を見つけるのに苦労していましたが、基本的にはサーバ経由でページをレンダリングしますが、その後のルーティングはreact-routerを経由してクライアントサイドにします。私はルータのためにcreateMemoryHistoryを使用してサーバー側のルータを持つことができます。

class Router extends React.Component { 
    render() { 
    return(
     <Router history={createMemoryHistory}> 
     <Route path="/" component={App}> 
      <IndexRoute component={Index} /> 
      <Route path="/contact" component={Contact}/> 
      <Route path="/about" component={About}/> 
     </Route> 
     </Router> 
    ) 
    } 
} 

リアクションレールの宝石を介して、サーバー上のコンテンツをレンダリングすることができます。

<%= react_component('Router', {}, {prerender: true}) %> 

これの問題は、私は別のページに移動したときにURLのは変わらないということです。理想的には、createMemoryHistoryを使用してサーバにルータをロードできるようにしたいのですが、一度ロードされるとbrowserHistoryに切り替えることになります。

Answer 1

これは、環境に基づいて先にhistoryを設定することで実現できます。私はreact_componentのRailsに慣れていませんが、私はMountUpがルートコンポーネントであると推測しています。

const history = process.env.NODE_ENV === 'server' ? createMemoryHistory : browserHistory; 

// ... 

class MountUp extends React.Component { 
    render() { 
    return (
     <Router history={history}/> 
    ); 
    } 
} 

// ... 

class Routes extends React.Component { 
    render() { 
    return(
     <Router history={this.props.history}> 
     <Route path="/" component={App}> 
      <IndexRoute component={Index} /> 
      <Route path="/contact" component={Contact}/> 
      <Route path="/about" component={About}/> 
     </Route> 
     </Router> 
    ) 
    } 
}