React Router 服务器端渲染 Rails答案

【问题标题】：React Router server side rendering RailsReact Router 服务器端渲染 Rails
【发布时间】：2016-10-25 03:52:27
【问题描述】：

我一直在努力寻找实现此目的的好方法，但基本上我想做的是通过服务器呈现页面，但随后通过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-rails gem，我可以在服务器上呈现内容。

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

这个问题是当我导航到不同的页面时 URL 不会改变。所以理想情况下，我希望能够使用createMemoryHistory 在服务器上加载路由器，然后一旦加载，我想切换到browserHistory。

【问题讨论】：

标签： javascript ruby-on-rails reactjs react-router

【解决方案1】：

您可以通过根据环境提前设置 history 属性来完成此操作。我不熟悉 Rails 上的 react_component，但我猜 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>
    )
  }
}

【讨论】：