Reactjs 防止使用React路由器卸载组件

说到部件，我是个笨蛋。然而，当我浏览链接时，我无法找到为什么我的组件会卸载的解释？如何预防呢

在我的示例中，我有一个组件，它包含计时器并通过

我有一个错误：

下面是代码：

/*global define, Backbone, React, $, Request, Router, Route, Link */

var App = React.createClass({
    render: function () {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/timer">Timer</Link></li>
                </ul>
                {this.props.children}
            </div>
        )
    }
});

var About = React.createClass({
    render: function () {
        return <h3>Here is about page</h3>
    }
});

var Timer = React.createClass({
    getInitialState: function() {
        return {counter: 0};
    },
    render: function () {
        return (
            <div>
                <h2>Time is running over...</h2>
                <b>{this.props.interval}</b>
                <p>{this.state.counter}</p>
            </div>
        )
    },
    componentDidMount: function () {
        this.loadCommentsFromServer();
        setInterval(this.loadCommentsFromServer, 1000);
    },
    loadCommentsFromServer: function () {
        this.setState({counter: this.state.counter + 1});
    }
});

React.render((
    <Router location="history">
        <Route path="/" component={App}>
            <Route path="about" component={About} />
            <Route path="timer" component={Timer} />
        </Route>
    </Router>
), document.body);

/*全局定义、主干、反应、$、请求、路由器、路由、链接*/
var App=React.createClass({
渲染：函数（）{
返回(
应用程序

关于
计时器

{this.props.children}
)
}
});
var About=React.createClass({
渲染：函数（）{
返回这里是关于第页的
}
});
var Timer=React.createClass({
getInitialState:函数（）{
返回{计数器：0}；
},
渲染：函数（）{
返回(
时间不多了。。。
{this.props.interval}
{this.state.counter}

)
},
componentDidMount:函数（）{
this.loadCommentsFromServer（）；
setInterval（this.loadCommentsFromServer，1000）；
},
loadCommentsFromServer:函数（）{
this.setState（{counter:this.state.counter+1}）；
}
});
反应((
)，文件正文）；

在您的情况下，react路由器按预期工作，如果您希望计时器在整个应用程序中可见，则需要将其视为组件而不是视图

/*global define, Backbone, React, $, Request, Router, Route, Link */

var App = React.createClass({
    render: function () {
        return (
            <div>
                <h1>App</h1>
                // this will not unmount when routes are changed
                <Timer /> 
                <ul>
                    <li><Link to="/about">About</Link></li>
                </ul>
                // this will unmount/mount when routes are changed
                {this.props.children}
            </div>
        )
    }
});

var About = React.createClass({
    render: function () {
        return <h3>Here is about page</h3>
    }
});

var Timer = React.createClass({
    getInitialState: function() {
        return {counter: 0};
    },
    render: function () {
        return (
            <div>
                <h2>Time is running over...</h2>
                <b>{this.props.interval}</b>
                <p>{this.state.counter}</p>
            </div>
        )
    },
    componentDidMount: function () {
        this.loadCommentsFromServer();
        setInterval(this.loadCommentsFromServer, 1000);
    },
    loadCommentsFromServer: function () {
        this.setState({counter: this.state.counter + 1});
    }
});

React.render((
    <Router location="history">
        <Route path="/" component={App}>
            <Route path="about" component={About} />
        </Route>
    </Router>
), document.body);

/*全局定义、主干、反应、$、请求、路由器、路由、链接*/
var App=React.createClass({
渲染：函数（）{
返回(
应用程序
//当路由更改时，这不会卸载

关于

//这将在更改路由时卸载/装载
{this.props.children}
)
}
});
var About=React.createClass({
渲染：函数（）{
返回这里是关于第页的
}
});
var Timer=React.createClass({
getInitialState:函数（）{
返回{计数器：0}；
},
渲染：函数（）{
返回(
时间不多了。。。
{this.props.interval}
{this.state.counter}

)
},
componentDidMount:函数（）{
this.loadCommentsFromServer（）；
setInterval（this.loadCommentsFromServer，1000）；
},
loadCommentsFromServer:函数（）{
this.setState（{counter:this.state.counter+1}）；
}
});
反应((
)，文件正文）；

如果您想在不卸载的情况下再次显示组件，您可以始终显示它，并在路由离开时隐藏。 要实现此目的，您必须在目标路线之外，例如，您希望防止

ProjectsList

卸载：

   <Route path="/" component={App}>
        <IndexRoute component={ProjectsList} />
        .....

看起来是这样的：

    <Route path="/(mobile.html)" component={App}>
        <IndexRoute component={LayoutToogler} showProjects={true}/>

---

不要忘记在

项目列表中处理
样式
属性

组件

为了避免在路由器再次装载组件时获取/构建大/慢的数据块，您可以这样做：1）实现一个全局缓存对象（只需在纯javascript级别从应用程序的根导出一个空对象）2）在您的组件中，执行以下操作：

import {cache} from '.....App';
const myComponent = props => {
if (!cache.myBigList) {
  cache.myBigList = [];
}
const [list, setList] = useState(cache.myBigList);
cache.myBigList = list;
...

这样，组件第一次装入时，它将在[]处启动缓存。 然后，每次更改列表时，都会再次执行该函数，并将列表保存在缓存中。

---

再次安装组件时，给useState的初始状态是上一次安装周期中最后保存的状态。

您希望计时器在整个应用程序中处于活动状态吗？为什么你有一个具体的路线呢？这只是一个例子。我的主要目的是在浏览链接时不要卸载组件。在我的实际项目中，我有一个具有巨大网格的复杂组件。所以每次我回到这个组件时，它都会向服务器发送请求以获取数据。但我不需要这样的行为。我不明白为什么React-Router销毁组件而不只是隐藏它？React-Router在这种情况下的行为与预期一样-如果您有一个不应卸载的组件，那么您需要将其组合到顶级应用程序组件中-请参阅下面的我的答案，但在这种情况下，计时器将始终可见。正如我之前在实际项目中提到的，我有一个具有巨大网格的复杂组件。所以每次我回到这个组件时，它都会向服务器发送请求以获取数据。但我不需要这样的行为。我不明白为什么我们要销毁组件而不是隐藏它？似乎我不明白使用react路由器的目的：（@AlexeiBerkov）你找到解决方案了吗？我使用简单的CSS aproache

       <ProjectsList
         style={{display:this.props.children.props.route.showProjects?'block':'none'}}
                />

import {cache} from '.....App';
const myComponent = props => {
if (!cache.myBigList) {
  cache.myBigList = [];
}
const [list, setList] = useState(cache.myBigList);
cache.myBigList = list;
...