1. 官方方法（推荐）

2. react-router-transition

https://github.com/maisano/react-router-transition

1. 安装

npm install --save react-router-transition

2. 使用

//--js
import React from 'react';
import RouteTransition from 'react-router-transition';

class App extends React.Component {
  render() {
    return (      <div className="app">
        <RouteTransition
          pathname={this.props.location.pathname}
          atEnter={{ opacity: 0 }}          atLeave={{ opacity: 0 }}          atActive={{ opacity: 1 }}          className="transition-wrapper">
          {this.props.children}        </RouteTransition>
      </div>
    );
  }
}

module.exports = App;

//--css
html,
body,
#root,
.app,
.transition-wrapper,
.transition-wrapper>div {
  height: 100%;
}

//--生成的html结构<div class='transition-wrapper'>
  <div style='opacity: 1'>
    <div class='app'>
      ...    </div>
  </div></div>

3. 模块打包问题

目前npm上的react-router-transition模块有问题，package.json配置的入口文件为lib/react-router-transition.js，该文件为webpack编译打包后的文件，不能再次打包，所以实际使用时需要导入src/RouteTransition.js文件，结合webpack.config.js配置如下：

var node_modules_dir = path.join(__dirname, 'node_modules');

resolve: {
  extensions: ['', '.js', 'jsx'],  alias: {    'react-router-transition': path.resolve(node_modules_dir,'react-router-transition/src/RouteTransition.jsx')
  }
}

参考

Animated transitions
maisano/react-router-transition
misterfresh/react-easy-transition
reactjs/react-router
react + react-router transition
What is the correct way to animate/transition between routes in react router

作者：gongzhen
链接：https://www.jianshu.com/p/4dda6e4a22d2