将React组件路由到rails部分？

Question

我在我的Rails 4.2应用程序中有一个React组件，它通过NewContactForm设置为contact/new，并且可以通过这种方式自行运行。但是，我一直在寻找将它注入现有的Rails页面（listings/new或listings/edit，两者都通过_form部分呈现），因为这些信息是附属的，以获得更好的流量。就目前而言，我的路由要求我有一个准确的路径来渲染组件;它有什么方法让我在一个部分内渲染我的组件？我知道这个想法是能够在任何地方使用应用程序注入React，我只是不确定在这种情况下如何处理路由（除非将views/contacts/new转换为部分并传入？）。

app.jsx：

import React from 'react'
import { Switch, Route } from 'react-router-dom'
import WarehouseReport from './reports/warehouse'
import NewContactForm from './contacts/new-contact-form'

export default function App() {
  return <Switch>
    <Route exact path='/:account_id/warehouses/:warehouse_id/warehouse_report' component={ WarehouseReport }/>
    <Route exact path='/:account_id/contacts/new' component={ NewContactForm }/>
  </Switch>
}

Answer 1

看来你的组件中的路由器与rails路由器混淆了。

此处指定的路由将处理组件本身内的路由。这意味着单击组件内的任何内容都将在组件本身中呈现其他内容，但不会影响rails服务器提供的路由。

组件需要自己的路由的假设场景是，您有一个多步形式的组件，并且您正在使用路由器来处理您所处的步骤。

要在组件内部渲染组件，似乎最简单的方法是使用react-rails和反应帮助器的组合

1. 将react-rails gem添加到您的设置gem 'react-rails'
2. 捆绑所有React组件，以便它们可供使用。
3. 使用react_component helper渲染部分内的组件： <%= react_component('ComponentName', {prerender: true}) %>