Невозможно интегрировать ReactJS с Rails с использованием response-rails

Question

У меня есть мой React-интерфейс.Я использую Ruby в качестве моего back-end.Я хочу объединить их, потому что в моем новом веб-приложении Ruby on Rails ничего нет.

Следуя этому руководству , я пытаюсь следовать методу # 1, который использует react-rails.Тем не менее, я действительно смущен.У меня есть куча компонентов в моем React-интерфейсе.У меня есть index.js, Header.jsx и все компоненты, которые есть на типичном веб-сайте NavBar (они отображаются в Header.jsx, который вызывается index.js).

Моя проблема в том, что я не знаю, как сделать интеграцию сложной структуры React, подобной этой, в Rails.Я не знаю, потому что учебник отображает только один автономный компонент.Итак, я решил попробовать рендеринг только index.js.Однако это не удается.Веб-страница пуста.

Следуя структуре в учебнике, в моем app/assets/javascripts/components/ у меня есть один index.js, который использует ReactDOM.render():

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Contact from "./components/ContactUs";
import Header from "./components/Header";
import Stats from "./components/Stats";
import Videos from "./components/Videos";
import Login from "./components/Login";
import Process from "./components/Process";
import BaseComponent from "./components/BaseComponent";

const routing = (
  <div>
    <Router>
      <Switch>
        <Route path="/" exact component={Login} />
        <Route
          path="/landingpage/videos"
          exact
          render={props => (
            <BaseComponent>
              <Videos />
            </BaseComponent>
          )}
        />
        <Route
          path="/landingpage/contact"
          exact
          render={props => (
            <BaseComponent>
              <Contact />
            </BaseComponent>
          )}
        />
        <Route
          path="/landingpage/stats/"
          exact
          render={props => (
            <BaseComponent>
              <Stats />
            </BaseComponent>
          )}
        />
        <Route
          path="/landingpage/process/"
          exact
          render={props => (
            <BaseComponent>
              <Process />
            </BaseComponent>
          )}
        />
      </Switch>
    </Router>
  </div>
);

ReactDOM.render(routing, document.getElementById("root"));

serviceWorker.unregister();

Но ничего не показывает.Пожалуйста помоги.