转到另一条路线必须卸载当前路线组件

时间:2016-01-25 16:01:35

标签: react-router

这是我的用例,我做了一个简单的例子,为了问这个问题,假设我有两个路由,/ view1和/ view2,每个都安装一个组件,View1和View2,我需要View1才能卸载转到/ view2。

如果您想尝试以下代码:

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link, browserHistory} from 'react-router';
import Portal from 'react-portal';

class View1 extends React.Component {
    constructor(context, props) {
        super(context, props)
    }

    componentDidMount() {
        console.log('view 1 mounted');
    }

    componentWillUnmout() {
        console.log('view 1 unmount');
    }

    render() {
        return (
            <h2>hanta</h2>
        );
    }
}

class View2 extends React.Component {
    constructor(context, props) {
        super(context, props)
    }

    componentDidMount() {
        console.log('view 2 mounted');
    }

    componentWillUnmout() {
        console.log('view 2 unmount');
    }

    render() {
        return (
            <h2>View 2</h2>
        );
    }
}

class View extends React.Component {
    render() {
        return (
            <div>
                <h1>View</h1>
                <Link to="/view1">view 1</Link>
                <Link to="/view2">view 2</Link>
                {this.props.children}
            </div>
        );
    }
}

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={View}>
            <Route path="/view1" component={View1} />
            <Route path="/view2" component={View2} />
        </Route>
    </Router> 
    , document.getElementById("container"))

在任何情况下都不会调用ComponentWillUnmout,我正在使用:

├──remit@0.14.6

├──coric-dom@0.14.6

├──reaction-router@2.0.0-rc5

1 个答案:

答案 0 :(得分:1)

你拼错了。它应该是componentWillUnmount,而不是componentWillUnmout