Question

我使用React-Router来浏览我的移动应用。出于某种原因，我的组件在每次转换时都要卸载，然后在＆＃34; back＆＃34;上重新安装。这会导致丢失状态和丢失滚动位置。我没有做＆＃34; ignoreScrollPosition＆＃34;任何地方，所以我对可能导致这种情况的原因感到困惑。

我使用Reflux来管理我的状态并使用Cordova / Phonegap为手机编写应用程序。有没有人在使用Cordova / Phonegap之前遇到麻烦？

这是我用于路由器的代码：

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);
});

Answer 1

我相信为了完成您的需要，您需要使用Router.HistoryLocation而不是默认（HashLocation）。这是因为HistoryLocation使用HTML5历史记录API（即pushState()）来处理网址导航，因此您可以点按浏览器“返回”。功能，无需重新安装组件。

但是，每当发出初始页面加载请求时，您都必须修改服务器以加载正确的页面。我不确定你会怎么做Android，但这应该可以解决你的问题。

路由器示例：

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

服务器示例（节点w / Express）

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

React Router - History Location

Answer 2

事实证明问题与我使用Flexbox有关。我的身体没有滚动，而是里面有一个元素。

我的flexbox UI看起来像这样：

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

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

这意味着.content元素正在滚动而不是文档正文。似乎React-Router跟踪文档正文的滚动位置。

所以，为了解决这个问题，我使用position: fixed作为.header和.footer，并放弃使用flexbox以这种方式呈现核心UI。因此，文档正文现在滚动，React-Router会跟踪它。

作为一个额外的好处，浏览器在绘画期间看起来效率更高。

React-Router组件在转换时卸载

2 个答案: