Javascript React路由器服务器端渲染Rails

我一直在努力寻找一种实现这一点的好方法，但本质上我想做的是通过服务器呈现一个页面，但通过

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{
render（）{
返回(
)
}
}

然后通过react rails gem，我能够在服务器上呈现内容

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

---

问题是，当我导航到不同的页面时，URL不会改变。因此，理想情况下，我希望能够使用

createMemoryHistory

在服务器上加载路由器，然后加载后，我希望切换到

browserHistory

您可以根据环境提前设置

历史记录

道具来实现这一点。我不熟悉Rails上的

react\u组件

，但我猜

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>
    )
  }
}

const history=process.env.NODE\u env==='server'？createMemoryHistory:browserHistory；
// ...
类MountUp扩展了React.Component{
render（）{
返回(
);
}
}
// ...
类。组件{
render（）{
返回(
)
}
}