How to not unmount components on page navigations?

[4ndv]

I have some components, that should not be unmounted during their "presence" on the page, but should be unmounted if next page doesn't have them.

How it can be done?

[4ndv]

Setting id and data-turbolinks-permanent does not help:

<%= react_component("ActiveTimer", {}, class: 'active-timer-menu', 'data-turbolinks-permanent': true, id: 'active-timer-menu') %>

https://github.com/turbolinks/turbolinks/blob/master/README.md#persisting-elements-across-page-loads

[4ndv]

Looks like #962 is related to this

[BookOfGreg]

Yep. Looks related to the linked PR.

[4ndv]

Ugly, but seemingly working temporary workaround:

Add this to your component (inspired by solution in #119, but modified for modern react):

import ReactDOM from 'react-dom'

componentDidMount () {
  ReactDOM.findDOMNode(this).parentElement.removeAttribute('data-react-class')
}

Use react_component like this (not a temporary, this way it SHOULD work, but doesn't without lines above):

<%= react_component("ComponentName", {}, 'data-turbolinks-permanent': true, id: 'unique-id-for-turbolinks') %>

[gregblass]

EDIT: I apologize, I should have read the docs - the javascript_pack_tag needs to come after turbolinks in the head. When I do that, it works perfectly fine for me.

[alkesh26]

Closing the issue as we have a solution.