ruby-on-rails – 使用rails react-rails gem reactor路由器进行

发布时间：2020-12-17 02:25:36 所属栏目：百科来源：网络整理

导读：我创建了这个使用rails(v4.2.6)和react-rails(v1.6.2)和react-router(v2.0.0-rc5)的示例repo： https://github.com/pioz/rails_with_react_and_react_router_example 在app / views / application / react_entry_point.html.erb文件中,我使用了组件MountUp %

我创建了这个使用rails(v4.2.6)和react-rails(v1.6.2)和react-router(v2.0.0-rc5)的示例repo： https://github.com/pioz/rails_with_react_and_react_router_example

在app / views / application / react_entry_point.html.erb文件中,我使用了组件MountUp

<%= react_component('MountUp',{},{prerender: false}) %>

组件MountUp渲染我的路由器：

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

一切正常,但如果我更改选项prerender：true我得到一个奇怪的错误React :: ServerRendering :: PrerenderError in Application#react_entry_point：

Encountered error "Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings." when prerendering MountUp with {}
Object.invariant [as default] ((execjs):21983:16)
createHashHistory ((execjs):24108:130)
(execjs):22633:20
wrapDeprecatedHistory ((execjs):25285:61)
createRouterObjects ((execjs):25259:23)
componentWillMount ((execjs):25228:38)
ReactCompositeComponentMixin.mountComponent ((execjs):8138:13)
wrapper [as mountComponent] ((execjs):3131:22)
Object.ReactReconciler.mountComponent ((execjs):6583:36)
ReactCompositeComponentMixin.mountComponent ((execjs):8153:35)
/Users/pioz/.rvm/gems/ruby-2.3.0/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:39:in `exec'
...

如何呈现此应用服务器端？这是正确的方法吗？

解决方法

找到了解决方案：我们需要两个版本的组件MountUp：使用浏览器历史记录的客户端版本和使用虚假内存历史记录的服务器版本.这里有两个版本的组件：

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


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

我们还需要使用等于请求的url路径创建内存历史记录：为此,我们可以使用请求的路径将新的prop路径传递给组件：

<%= react_component('MountUp',{path: request.path},{prerender: true}) %>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!