Skip to content
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.

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

Components don't re-render when changing pages with pjax #1053

Open
hampelm opened this issue Feb 14, 2020 · 0 comments
Open

Components don't re-render when changing pages with pjax #1053

hampelm opened this issue Feb 14, 2020 · 0 comments

Comments

@hampelm
Copy link

@hampelm hampelm commented Feb 14, 2020

We use pjax on an Rails app we are slowly converting from older JS to React.

The issue: Components included withreact_component do render on the first page load, but don't render on pjax page changes. The docs suggest they should.

I'm not sure if this is just an issue with our config or with the way react-rails handles pjax interaction. I saw #742 but the comments don't seem to fix the issue I'm seeing.

I made a small test app to demonstrate this issue:
https://github.com/hampelm/react-rails-pjax-debug

When you load the app, all components render:
Screen Shot 2020-02-14 at 12 05 08 PM

When you browse to a new page and back, components in the area loaded by pjax do not render:
Screen Shot 2020-02-14 at 12 05 15 PM

Files of note:
javascripts/application.js initializes pjax
Components are included in welcome/index.html.erb, welcome/two.html.erb, and application.html.erb.

Workaround I found: if I listen to pjax:end in javascripts/application.js and call ReactRailsUJS.mountComponents(), the app behaves as expected:

  $(document).on('pjax:end', function() {
    console.log('pjax:end');
    ReactRailsUJS.mountComponents() // This forces components to re-render
  })

System configuration

Sprockets or Webpacker version: 4.2.2
React-Rails version: 2.6.1
React_UJS version: not clear
Rails version: 5.1.7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant