React-Router 组件在转换时卸载

Posted 2023-02-19

【中文标题】React-Router 组件在转换时卸载

【英文标题】：React-Router component unmounting on transition

【发布时间】：2015-11-14 23:04:24

【问题描述】：

我正在使用 React-Router 来导航我的移动应用程序。出于某种原因，我的组件在每次转换时都会卸载，然后在“返回”时重新安装。这会导致丢失状态和丢失滚动位置。我没有在任何地方做“ignoreScrollPosition”，所以我对可能导致这种情况的原因感到困惑。

我正在使用 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);
);

【问题讨论】：

你能分享你的router.run代码吗？

【参考方案1】：

我相信为了完成您想要的，您需要使用 Router.HistoryLocation 而不是默认值 (HashLocation)。这是因为HistoryLocation 使用html5 历史API（即pushState()）来处理URL 导航，因此您可以在不重新安装组件的情况下使用浏览器的“返回”功能。

但是，无论何时发出初始页面加载请求，您都必须修改服务器以加载正确的页面。我不确定你会如何为 android 做到这一点，但这应该可以解决你的问题。

---

路由器示例：

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

服务器示例（带 Express 的节点）

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

React Router - History Location

【讨论】：

切换到 Router.HistoryLocation 并没有解决它。如果我不做Phonegap，它可能会有。感谢您的建议！

【参考方案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 跟踪它。

另外一个好处是，浏览器在绘制过程中的性能似乎要高得多。