Search code examples
ruby-on-railsreact-rails

When I use React_component, View_Helper provided by Gem called react-rails in Rails5, the contents of div become empty without reloading


I use react with Rails 5 using Gem called React-Rails. However, although the component of react is loaded using ViewHelper called react_component, the contents of the div will be empty when the page is transitioned. However, reloading will create the contents of the div.

I will explain in the code.

index.html.erb

<%= react_component('Hoge') %>

Hoge.js

import React from "react"

class Hoge extends React.Component {
  render () {
    return (
      <React.Fragment>
        <div className="row">hello</div>
      </React.Fragment>
    );
  }
}
export default Hoge

The contents of the HTML when the page is transitioned are as follows.

<div data-react-class="Hoge" data-react-props="{}"></div>

There are no error logs in the browser and the Rails console.

When reloading this page

<div data-react-class="Hoge" data-react-props="{}">
<div class="row">hello</div>
</div>

Solution

  • I'm sorry. What you said was correct. I write <%= javascript_pack_tag 'application' %> application.html.erb in Head tag above turbolinks. Thank you.