react router Transition

使用react-create-app

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link,Redirect,Switch } from "react-router-dom";

import { TransitionGroup, CSSTransition } from "react-transition-group";
import '../src/assets/sass/App.css';

const NavLink = (props) => {
  return(
    <li style={styles.navItem}>
      <Link {...props} style={{color: "inherit"}}/>
    </li>
  )
}

const HSL = ({match: {params}}) => {
  return(
    <div style={{
      ...styles.fill,
      ...styles.hsl,
      background: `hsl(${params.h}, ${params.s}%, ${params.l}%)`
    }}>
    hsl({params.h}, {params.s}%, {params.l}%)
    </div>
  )
}
const RGB = ({match: {params}}) => {
  return (
    <div style={{
      ...styles.fill,
      ...styles.rgb,
      background: `rgb(${params.r}, ${params.g}, ${params.b})`
    }}>
      rgb({params.r},{params.g},{params.b})
    </div>
  )
}

class App extends Component {
  render() {
    return (
        <Router>
          <Route render={({location}) => (
            <div style={{...styles.fill}}>
              <div style={{
                padding: '20px',
                color: '#f00',
              }}>https://reactcommunity.org/react-transition-group/</div>
              
              <Route exact path='/' render={() => <Redirect to="/hsl/10/90/50" />}/> 
              <ul style={styles.nav}>
                <NavLink to="/hsl/10/90/50">Red</NavLink>
                <NavLink to="/hsl/120/100/40">Green</NavLink>
                <NavLink to="/rgb/33/150/243">Blue</NavLink>
                <NavLink to="/rgb/240/98/146">Pink</NavLink>
              </ul>

              <div style={styles.content}>
                <TransitionGroup>
                  <CSSTransition key={location.key} 
                                classNames="fade" 
                                timeout={1000} 
                                onEnter={()=>console.log('onEnter')}>
                    <Switch location={location}>
                      <Route exact path="/hsl/:h/:s/:l" component={HSL}/>
                      <Route exact path="/rgb/:r/:g/:b" component={RGB} />
                      <Route render={() => <div>Not Found</div>} />
                    </Switch>
                  </CSSTransition>
                </TransitionGroup>
              </div>
              
            </div>  
          )}/>
        </Router>
    );
  }
}

const styles = {};

styles.fill = {
  position: "absolute",
  left: 0,
  right: 0,
  top: 0,
  bottom: 0
};

styles.content = {
  ...styles.fill,
  top: "40px",
  textAlign: "center",
  width: '100%',
  overflowX: 'hidden',
};

styles.nav = {
  padding: 0,
  margin: 0,
  position: "absolute",
  top: 0,
  height: "40px",
  width: "100%",
  display: "flex"
};

styles.navItem = {
  textAlign: "center",
  flex: 1,
  listStyleType: "none",
  padding: "10px"
};

styles.hsl = {
  ...styles.fill,
  color: "white",
  paddingTop: "20px",
  fontSize: "30px"
};

styles.rgb = {
  ...styles.fill,
  color: "white",
  paddingTop: "20px",
  fontSize: "30px"
};


export default App;

App.css

.fade-enter {
    transform: translateX(-100%);
    z-index: 1;
}

.fade-enter.fade-enter-active {
    transform: translateX(0);
    transition: all 1s ease;
}

.fade-exit{
    transform: translateX(0);
}
.fade-exit.fade-exit-active{
    transform: translateX(100%);
    transition: all 1s ease;
}

效果

参考：

https://reacttraining.com/react-router/web/example/animated-transitions