reactjs - 使用 React-router 防止组件被卸载

Question

说到React-Router，我很笨。成分。但是，我无法找到解释为什么当我浏览链接时我的组件会被卸载？又该如何预防呢？

在我的示例中，我有一个包含计时器和重新渲染内容的组件

我收到一个错误:

这是 ReactJS 代码:

/*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);

Answer 1

如果您想在不卸载的情况下再次显示组件，您可以始终显示它并在路由离开时隐藏。要实现此目的，您可以访问外部目标路径，例如您希望阻止 ProjectsList 取消挂载:

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

1.将 ProjectsList 放入 App 并创建此类代理组件 component={ProjectsList}:

  const LayoutToogler = () => (<div></div>);

看起来是这样:

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

在顶级应用程序组件中，只需检查此属性 (showProjects) 即可决定是否显示项目:

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

不要忘记处理 ProjectList 组件中的 style 属性