React-rails: react_component not rendering on browser back navigation

Created on 1 Feb 2015 · 10Comments · Source: reactjs/react-rails

I've tried a few different things, but I'm unable to get my React components to render when navigating using the browser back button (sometimes even the forward button).

It doesn't seem to matter whether I prerender them server-side or if I render them client-side. E.g., this:

<%= react_component('TopicLinker', {topicName: @topic.name, topicId: @topic.slug}, {prerender: true}) %>

The entire mount node just doesn't show up in the DOM when navigating using the browser back button - multiple browsers, too - Safari (latest), Chrome (latest), etc - so I don't think this is an issue with React.js itself - feels more like it has to do with react-rails.

Thoughts? I know this is vague, but I'm really not sure what I'm doing wrong (only thing I can seem to think is that Turbolinks might be breaking this somehow). Everything else with react-rails works perfect, except with browser back navigation.

Source

rringham

Most helpful comment

Is this back? I'm seeing something that might be related.. when I click on an anchor link my component gets removed.

baash05 on 2 Oct 2018

👍3

All 10 comments

Did some more testing, and it looks like it seems to come down to Turbolinks. If I disable Turbolinks (e.g. data-no-turbolink on the body element in my layouts), the problem sort of goes away - at least for Chrome. But on Safari, it becomes even more unpredictable.

I'd prefer to not disable Turbolinks... but I'm worried that this is going to be a limitation of react-rails.

rringham on 1 Feb 2015

Looks like this resolves this for Safari - it's combination of disabling Turbolinks, and the Safari window.onunload trick:

<body data-no-turbolink data-no-transition-cache>
...
<script type="text/javascript">
    window.onunload = function(){};
</script>
</body>

rringham on 1 Feb 2015

Yes, I think some versions of react-rails + some versions of Turbolinks have this bug:

when a page is restored from the Turbolinks cache, components aren't mounted

I think the solutions are:

Disable the turbolinks cache with Turbolinks.pagesCached(0)
use react-rails master + the latest version of Turbolinks

See related #89

rmosolgo on 1 Feb 2015

I had similar issues and my solution was to remove the data-react-class attribute in the component rendered by react_component. Something along these lines inside the component:

componentDidMount: function() {
  $(this.getDOMNode()).parent().removeAttr('data-react-class');
},

The root of the issue seemed to be Turbolinks saving page state when leaving the page and after component unmounting in rails_ujs. I'm not sure what kind of long-term issues this might cause but seems to work so far.

luopio on 24 Feb 2015

The problem is with this line https://github.com/reactjs/react-rails/blob/master/lib/assets/javascripts/react_ujs.js.erb#L51 which when unmounting the React component also deletes the root node, so when coming back there is nothing on the page to mount again. I'm not sure why its doing that but if I remove that line things work for me.