React Router 服务器端渲染 Rails

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-rails gem，我能够在服务器上呈现内容。

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

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

- YTRdev

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

- casr