React-Router component unmounting on transition

Question

I'm using React-Router to navigate my mobile app. For some reason my components are unmounting on every transition and then remounting on "back". This results in lost state and lost scroll position. I'm not doing "ignoreScrollPosition" anywhere so I'm puzzled as to what may be causing this.

I'm using Reflux to manage my state and writing an app for mobile phones using Cordova/Phonegap. Has anyone run into trouble with this using Cordova/Phonegap before?

Here's the code I'm using for the router:

var React = require('react');
var Reflux = require('reflux');
var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;

var App = React.createClass({
    render: function () {
        return (
            <RouteHandler/>
        );
    }
});

...

var routes = (
    <Route handler={App} path="/">
        <DefaultRoute handler={LaunchScreen} />
        <Route name="sample" path="/sample" handler={SampleScreen} />
        ...
    </Route>
);

Router.run(routes, function (Root) {
    React.render(<Root/>, document.body);
});

Can you share your `router.run` code? – BradByte Aug 21 '15 at 12:22 — BradByte, Aug 21 '15 at 12:22

score 1 · Answer 1 · answered Aug 21 '15 at 19:32

I believe in order to accomplish what you are wanting you need to use Router.HistoryLocation and not the default (HashLocation). This is because HistoryLocation uses the HTML5 history API (ie pushState() ) to handle the URL navigation so you can tap into the browser 'back' functionality without remounting your component.

However, you will have to modify your server to load the correct page whenever the initial page load request is made. I'm not sure how you would do that for Android, but that should solve your problem.

Router example:

Router.run(routes, Router.HistoryLocation, function (Root) {
    React.render(<Root/>, document.body);
});

Server example (node w/ Express)

app.get('*', function (req, res) {
  res.render('index');
});

React Router - History Location

Switching to Router.HistoryLocation didn't fix it. It may have if I wasn't doing Phonegap. Thanks for the suggestion! — RGBz, Aug 24 '15 at 15:28

score 0 · Accepted Answer · answered Aug 24 '15 at 15:27

It turns out the problem was related to my use of Flexbox. My body wasn't scrolling, instead an element inside it was.

My flexbox UI looked like this:

+----------------+
|    .header     |
+----------------+
|                |
|    .content    |
|                |
+----------------+
|    .footer     |
+----------------+

body {
     display: flex;
     flex-direction: column;
     ...
}
.content {
     flex: 1;
     overflow-y: auto;
     ...
}

This meant that the .content element was scrolling instead of the document body. It seems React-Router keeps track of the scroll position of the document body.

So, to fix this I used position: fixed for the .header and .footer and abandoned using flexbox to render the core UI in this way. As a result, the document body scrolls now and React-Router keeps track of it.

As an added benefit, the browser seems a lot more performant during paints.

React-Router component unmounting on transition

2 Answers2