防止组件使用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}/>

2. 在顶级应用程序组件中，只需检查此属性（showProjects）即可决定是否显示项目：

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

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

Answer 2

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

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