Skip to content

react_component not rendering on browser back navigation #159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
rringham opened this issue Feb 1, 2015 · 10 comments
Closed

react_component not rendering on browser back navigation #159

rringham opened this issue Feb 1, 2015 · 10 comments

Comments

@rringham
Copy link

rringham commented Feb 1, 2015

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.
@rringham
Copy link
Author

rringham commented Feb 1, 2015

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
Copy link
Author

rringham commented Feb 1, 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>

@rmosolgo
Copy link
Member

rmosolgo commented Feb 1, 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 rmosolgo mentioned this issue Feb 2, 2015
Closed
@luopio
Copy link

luopio commented Feb 24, 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.

@johnthethird
Copy link
Contributor

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.

@rmosolgo
Copy link
Member

Wow, I didn't realize turbolinks cached the actual document before changing pages. I always assumed it cached the server's response for the URL.

Turbolinks caching the document as-is
which happens before fetching a new page

Le sigh, better sort that out

@lolychee
Copy link

screenshot - 2015 02 26 - 19 38 32

the document.body is the actual content, please delete https://github.com/reactjs/react-rails/blob/master/lib/assets/javascripts/react_ujs.js.erb#L51

This was referenced Feb 28, 2015
Closed
Merged
@rmosolgo
Copy link
Member

rmosolgo commented Mar 1, 2015

Taking a pass at it here: #190, can someone checkout that commit and confirm it solves the problem?

@rmosolgo rmosolgo mentioned this issue Mar 1, 2015
Merged
@rmosolgo
Copy link
Member

I've merged #190, please update to master and reopen if you experience this issue again. Thanks for reporting it!

AjayBarot pushed a commit to AjayBarot/stories that referenced this issue Mar 13, 2017
@AjayBarot7035
Fix back button issue Ref: reactjs/react-rails#159
393aadc
@AjayBarot AjayBarot mentioned this issue Mar 13, 2017
Open
@ChaseSinclair ChaseSinclair mentioned this issue Apr 13, 2017
Open
@baash05
Copy link

baash05 commented Oct 2, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@luopio @johnthethird @lolychee @baash05 @rringham @rmosolgo