Маршрутизация компонента React к частичному рельсу?

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.

Гипотетический сценарий, при котором компоненту требуются его собственные маршруты, состоит в том, что у вас есть компонент, который представляет собой многошаговую форму, и вы используете маршрутизатор для обработки того, на каком этапе вы находитесь.

Чтобы отобразить компонент внутри самой части, кажется, что самый простой способ сделать это - использовать комбинацию response-rails и помощников реагирования

1. Добавить камень реактивных рельсов в вашу настройку gem 'react-rails'

2. Объедините все компоненты React, чтобы они стали доступны для использования.

3. Используйте response_component помощник для рендеринга компонента в вашей части:

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