Issue with router and InfiniteScroll

[ferrannp]

I am not sure if this is the proper place to write this but here you go. I am using the infinite scrolling component from https://github.com/vjeux/react-infinite-scroll/blob/master/src/react-infinite-scroll.js

When I use react-router and I write the url of my website like: http://xxx.index.html, the react-router is changing it to http://xxx.index.html#/ and this is making that the function "loadMore" from InfiniteScroll component gets called twice! (so I am fetching twice from my server).

Instead, if I write the url as http://xxx.index.html#/ directly, it works fine. Any idea of why this is happening and how to solve it?

[gaearon]

Does this happen with <Routes location="history">? Just curious why you're using hashes—do you need to support older browsers?

[ryanflorence]

With hash location we push /# into the url so that you don't have two urls with the same view. I suspect that's the reason you get two mounts.

Maybe we should be able to do this w/o causing two renders.

[mjackson]

The two-render problem is one that a lot of people have asked about and I've answered the question several times. I'm going to explain the mechanics of it here once more, and then remember this issue # to point people to it who ask about it in the future ;)

When you call React.renderComponent(<Routes>, ... ), the following things happen:

1. React mounts the component. This includes calling componentWillMount on your <Routes>, as well as render. This is the first render. However, since no transition has taken place yet your <Routes> simply render nothing (i.e. null).
2. Inside Routes#componentWillMount we kick off a transition to the current URL. Of necessity, transitions are asynchronous. This gives route handlers the ability to fetch data or make a call to the server before deciding if they need to abort or redirect the transition.
3. Sometime later, the transition completes. At this point the router updates the props of your <Routes> component to let it know what routes are currently active so it can render the page.

Honestly, I've never understood why this is such a problem for people. One of the expectations of render is that it is called by the framework (i.e. React) whenever the framework feels like it. You shouldn't be writing code that anticipates the # of times render will be called or works differently depending on when it is called. Instead, render should simply describe the end state of the DOM.

@Difort The infinite scroll script that you're using uses the loader prop inside render to get a descriptor of an element to display while you're loading more content. This element should always be consistent, probably a spinner or something. But you shouldn't be using the loader prop to actually load data. The loadMore function only gets called when the element scrolls, so it shouldn't be getting called when the page simply renders twice. If it is, there's the source of your problem.

@rpflorence If we did want to make the router only render once on initial page load, we could do one of 2 things:

1. Make transitions sync instead of async.
2. Make users manually run the initial transition before calling React.renderComponent.

Since neither of these are very good options, and since render should be totally resilient to being called many times (or only once), I opted to go the route I did. Please feel free to reopen if you think this is something that needs to be changed.

[bobeagan]

Maybe worthwhile to add a FAQ page to the docs and pull out gems such as this ^^^ and include it there so that people don't have to dig through closed issues to find helpful information and explanations?

[ryanflorence]

Yeah, we need an FAQ.

[jedwards1211]

So this happened to me, turns out the second willTransitionTo() did a redirect but the first one didn't, yet the second one's redirect never took effect. I think I will just add code to make it ignore the second willTransitionTo()...

[jothikg]

I am facing this similar issue and causing browser back button issue eg. I am navigating from View page (http://localhost:3000/) to Edit page (http://localhost:3000/editCard/1234) via dispatch(routeActions.push(/editCard/1234)), so it first navigate it to http://localhost:3000/editCard/panGuid1# and then http://localhost:3000/editCard/1234, when the user clicks browser back button. The page are navigating from the below sequence.

http://localhost:3000/editCard/1234
http://localhost:3000/editCard/1234# - Unnecessary navigation
http://localhost:3000/

Expected behaviour should be http://localhost:3000/editCard/1234 -> http://localhost:3000/

is there any fix for this?

[jothikg]

Any updates on my above question?