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>
I'm sorry. What you said was correct.
I write <%= javascript_pack_tag 'application' %>
application.html.erb in Head tag above turbolinks.
Thank you.