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() {
    ...
  }
}

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

一个坐骑> 一卸 > 二装 > 一个坐骑 > 两个卸载

首先安装一个，然后卸载两个。真奇怪！然后，我尝试将 react-router 更改为 v3.0.0，然后问题就消失了！所以我认为这是 v4.2 中的问题

Answer 1

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

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

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

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