我一直在努力寻找实现此目的的好方法,但本质上我想做的是通过服务器呈现页面,但随后通过 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
。
最佳答案
您可以通过根据环境提前设置您的 history
Prop 来完成此操作。我不熟悉 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>
)
}
}
关于javascript - React Router 服务器端渲染 Rails,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40231087/