在 React-router v4.2 中的组件之间卸载和挂载

Question

我正在使用 react-router v 4.2 并遇到了一些问题。有两个组件：

第一个是：

class One extends React.Component {
  componentWillMount() {
    console.log('One mount');
  }
  componentWillUnmount() {
    console.log('One unmount');
  }
  render() {
    ...
  }
}

第二个是：

class Two extends React.Component {
  componentWillMount() {
    console.log('Two mount');
  }
  componentWillUnmount() {
    console.log('Two unmount');
  }
  render() {
    ...
  }
}

当我将页面从组件一转到组件二时。并返回一个。我会得到：

一个安装> 一个卸载> 双座 > 一个坐骑> 两次卸载

一个先安装，然后两个卸载。很奇怪！然后，我尝试将反应路由器更改为v3.0.0，然后问题就消失了！所以我认为这是v4.2的问题

Answer 1

我解决了这个问题。感谢Ernie Yang在Facebook前端社区：链接

它只是将交换机组件添加到路由中，例如：

<Switch>
  <Route path="/Two" component={Two} />
  <Route path="/One" component={One} />
</Switch>

Ernie Yang创建的代码笔：https://codepen.io/anon/pen/jaEKve?editors=1111